Angular Academy · Ders

Playwright Testleri Yazma

Tarayıcı akışlarını Playwright ile otomatikleştirin

Playwright Testleri Yazma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

İlk Playwright Testiniz

Bir Playwright testi, page gibi fikstürleri alan eşzamansız bir işlevdir. @playwright/test paketinden test ve expect içe aktarılır ve bir kullanıcı senaryosu tanımlanır.

import { test, expect } from '@playwright/test';

test('opens the home page', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveURL(/.*localhost/);
});

page Fikstürü

page nesnesi tek bir tarayıcı sekmesini temsil eder. Her test, temiz bir bağlamda yeni ve yalıtılmış bir page alır; böylece testler yanlışlıkla çerezleri veya depolamayı paylaşmaz.

goto ile Gezinme

page.goto(url) bir URL'yi yükler ve sayfanın hazır olmasını bekler. Yapılandırmadaki baseURL ile birlikte göreli yolları kullanabilirsiniz.

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

Locator'larla Öğe Bulma

Bir locator, bir öğeye yönelik tembel ve otomatik beklemeli bir başvurudur. Kırılgan CSS seçicileri yerine getByRole, getByLabel ve getByText gibi anlamsal locator'ları tercih edin.

const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');

Yazma ve Tıklama

Girdi değerlerini ayarlamak için fill, düğmelere basmak için click kullanın. Playwright, işlem yapmadan önce öğelerin görünür ve etkin olmasını otomatik olarak bekler.

await page.getByLabel('Email').fill('ada@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();

Otomatik Bekleme Kararsız Uyku Gecikmelerini Ortadan Kaldırır

Eski araçların aksine Playwright, öğeleri ve doğrulamaların gerçekleşmesini otomatik olarak bekler. Elle zaman aşımı belirlemeniz neredeyse hiç gerekmez; testleri kararlı kılan da budur.

// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();

describe ile Testleri Gruplama

İlgili senaryoları gruplamak ve kurulumu beforeEach ile paylaşmak için test.describe kullanın.

test.describe('Login flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('shows the form', async ({ page }) => {
    await expect(page.getByLabel('Email')).toBeVisible();
  });
});

Tam Bir Kullanıcı Yolculuğunu Test Etme

Tam bir akışı modellemek için eylemleri zincirleyin. Her adım, kullanıcı davranışlarını anlatan bir betik gibi okunur.

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/.*dashboard/);
});

Testleri Çalıştırma

Tüm spesifikasyonları CLI'dan çalıştırın. Tarayıcıyı izlemek için --headed, Playwright'ın etkileşimli test çalıştırıcısını açmak için --ui ekleyin.

npx playwright test
npx playwright test --headed
npx playwright test --ui

Başarısızlıkların Hatalarını Ayıklama

Playwright, başarısızlık durumunda ekran görüntüleri, videolar ve adım adım yeniden oynatabileceğiniz bir iz kaydedebilir. İz görüntüleyici, her eylemdeki DOM'u göstererek kararsız başarısızlıkların tanılanmasını kolaylaştırır.

npx playwright test --trace on
npx playwright show-trace trace.zip

Test Yalıtımı Önemlidir

Her test kendi tarayıcı bağlamını aldığı için testler arasındaki sıraya veya paylaşılan duruma güvenmeyin. Her testin ihtiyaç duyduğu verileri kendi beforeEach bloğunda veya testin içinde hazırlayın.

Hızlı Kontrol

Neden waitForTimeout kullanmaktan kaçınmalısınız?

Özet

Bir Playwright testi page fikstürünü kullanır: gezinmek için goto, öğeleri bulmak için anlamsal locator'lar (getByRole, getByLabel) ve etkileşim için fill/click. Otomatik bekleme, kararsız uyku gecikmelerini ortadan kaldırır. describe ile gruplayın, npx playwright test ile çalıştırın ve izlerle hataları ayıklayın.

Sıkça Sorulan Sorular

“Playwright Testleri Yazma” dersi ücretsiz mi?

Evet — “Playwright Testleri Yazma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Playwright Testleri Yazma” dersinde ne öğreneceğim?

Tarayıcı akışlarını Playwright ile otomatikleştirin Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Playwright Testleri Yazma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön