Angular Academy · Ders

Seçiciler ve Doğrulamalar

Ögeleri hedefleyip durumu doğrulayın

Seçiciler ve Doğrulamalar, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. 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.

İyi Seçiciler Kararlı Testler Sağlar

Öğeleri nasıl bulduğunuz, testlerinizin ne kadar sağlam olduğunu belirler. CSS sınıflarına veya DOM yapısına bağlı seçiciler her yeniden tasarımda bozulur. Anlamsal, kullanıcıya yönelik locator'lar, kullanıcıların gerçekten algıladığı şeyi yansıttıkları için yeniden düzenlemelerden etkilenmeden çalışır.

getByRole: Tercih Edilen Locator

getByRole, öğeleri erişilebilirlik rollerine ve erişilebilir adlarına göre bulur. En dayanıklı locator'dır ve aynı zamanda bir erişilebilirlik kontrolü görevi görür.

page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });

getByLabel ve getByPlaceholder

Form alanlarını, bir kullanıcının onları tanımladığı şekilde, ilişkili etiketlerine veya yer tutucularına göre bulun.

page.getByLabel('Email address');
page.getByPlaceholder('Search products');

getByText ve getByTestId

getByText, görünür metinle eşleşir. Anlamsal bir başvuru olmadığında, bilerek eklediğiniz data-testid özniteliğini okuyan getByTestId ile alternatif seçim yapın.

page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">

Kırılgan CSS Seçicilerinden Kaçının

Yine de page.locator('.css-selector') kullanabilirsiniz; ancak bunu son çare olarak değerlendirin. Sınıf adları ve iç içe geçme yapısı sık değişir, roller ve etiketler ise nadiren değişir.

// Fragile, avoid when possible:
page.locator('div.row > button.primary');

Web Öncelikli Doğrulamalar

Playwright'ın locator'lar için sunduğu expect yaklaşımı web önceliklidir: koşul karşılanana veya zaman aşımına uğrayana kadar otomatik olarak yeniden dener. Kararsız olmayan doğrulamaların temelini bu oluşturur.

await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();

Yaygın Doğrulama Eşleştiricileri

Eşleştirici, bir öğenin veya sayfanın beklenen durumunu açıklar.

await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);

Listelerdeki Sayıları Doğrulama

Tekrarlanan öğeleri kontrol etmek için hepsini bulun ve sayıyı doğrulayın. Locator her öğeyle eşleşir ve toHaveCount durum kararlı hâle gelene kadar yeniden dener.

const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');

Olumsuz Doğrulamalar

Bir öğenin bulunmadığını veya gizli olduğunu, örneğin bir öğeyi sildikten sonra, doğrulamak için .not kullanın.

await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();

Locator'ları Filtreleme ve Zincirleme

Bir locator'ı filter ile daraltın veya bir üst öğenin içindeki kapsamı belirlemek için zincirleyin; bu, doğrulamaları kesin tutar.

const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();

Web Öncelikli Yaklaşım Neden Elle Yoklamadan Üstündür

Web öncelikli doğrulamalar yalnızca eski bir anlık görüntüyü yeniden okumak yerine ifadenin tamamını yeniden dener. Böylece await expect(loc).toHaveText('Done'), metin görünene kadar bekler ve elle yazılmış beklemelerin yol açtığı yarış koşullarını ortadan kaldırır.

Hızlı Kontrol

En dayanıklı locator'ı seçin.

Özet

Anlamsal locator'ları tercih edin: getByRole, getByLabel, getByText; alternatif olarak getByTestId kullanın. Otomatik olarak yeniden deneyen web öncelikli eşleştiricilerle (toBeVisible, toHaveText, toHaveCount, toHaveURL) doğrulama yapın ve kesinliği korumak için .not ile filter kullanın.

Sıkça Sorulan Sorular

“Seçiciler ve Doğrulamalar” dersi ücretsiz mi?

Evet — “Seçiciler ve Doğrulamalar” 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.

“Seçiciler ve Doğrulamalar” dersinde ne öğreneceğim?

Ögeleri hedefleyip durumu doğrulayın 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 3. dersidir.

“Seçiciler ve Doğrulamalar” 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