Playwright'te Await Ne İşe Yarar? Açıkça Açıklanmıştır!

Playwright, geliştiricilerin web uygulamaları için sağlam ve verimli testler yazmasını sağlayan, web tarayıcıları için güçlü bir otomasyon çerçevesidir. Playwright'in temel özelliklerinden biri, çoklu işlemleri eşzamanlı olarak yönetmesini sağlayan eşzamansız yapısıdır. Bu eşzamansız davranışın kalbinde, Playwright komut dosyalarında eşzamansız işlemlerin akışını yönetmede çok önemli bir rol oynayan await anahtar kelimesi bulunur.

Eşzamansız Programlamanın Temelleri

Playwright'te await'in ayrıntılarına girmeden önce, JavaScript'te eşzamansız programlamanın temellerini anlamak önemlidir.

Geleneksel eşzamanlı programlamada, işlemler birbiri ardına yürütülür ve her işlem, bir sonraki işlemin tamamlanmasını engelleyerek yürütülmesini engeller. Bu, özellikle ağ istekleri veya dosya işlemleri gibi zaman alan görevlerle uğraşırken performans sorunlarına yol açabilir.

Eşzamansız programlama, önceki işlemlerin tamamlanmasını beklemeden birden fazla işlemin başlatılmasına izin verir. Bu engellemeyen yaklaşım, özellikle G/Ç işlemleri veya harici kaynaklar içeren senaryolarda performansı ve yanıt verme yeteneğini artırır.

Playwright Nedir?

await ve rolüne girmeden önce, Playwright'in ne olduğuna kısaca değinelim. Playwright, web tarayıcılarını otomatikleştirmek için Microsoft tarafından geliştirilen, açık kaynaklı bir Node.js kütüphanesidir. Chromium, Firefox ve WebKit'i destekler ve bu da onu farklı tarayıcılarda web uygulamalarını test etmek için çok yönlü bir araç haline getirir.

Playwright, geliştiricilerin ve test uzmanlarının yüksek doğrulukta, güvenilir testler yazmasını sağlar. Özellikle birden fazla sekme, iframe ve hatta ağ isteklerini yakalama yeteneğiyle bilinir. Ancak, tüm potansiyelinden yararlanmak için, eşzamansız programlamayı ve await anahtar kelimesini anlamak esastır.

Promises ve Async/Await

JavaScript, eşzamansız işlemleri yönetmek için Promises kullanır. Bir Promise, hemen kullanılamayabilecek ancak gelecekte bir noktada çözülecek bir değeri temsil eder. ECMAScript 2017'de tanıtılan async/await sözdizimi, Promises ile çalışmak için daha okunabilir ve yönetilebilir bir yol sağlar.

• Bir async fonksiyonu her zaman bir Promise döndürür.
• await anahtar kelimesi yalnızca bir async fonksiyonunun içinde kullanılabilir.
• await, Promise çözülene kadar async fonksiyonunun yürütülmesini durdurur.

Playwright'te await'in Rolü

Playwright'te, birçok işlem doğası gereği eşzamansızdır. Bunlar arasında bir sayfaya gitmek, öğelerle etkileşim kurmak ve belirli koşulların karşılanmasını beklemek yer alır. await anahtar kelimesi, bu eşzamansız işlemleri etkili bir şekilde yönetmek için Playwright komut dosyalarında yaygın olarak kullanılır.

İşte await'in Playwright'te yaptıkları:

Yürütmeyi Durdurur: Bir Playwright eyleminden veya onayından önce await kullanıldığında, o eylem veya onay tamamlanana kadar komut dosyasının yürütülmesini durdurur.

Promises'leri Çözer: Bir Playwright yönteminin döndürdüğü Promise'in çözülmesini bekler ve çözülen değerle doğrudan çalışmanıza olanak tanır.

Doğru Sıralamayı Sağlar: Bir eylemin bir sonrakine geçmeden önce tamamlanmasını sağlayarak, işlemlerin doğru sırasını korumaya yardımcı olur.

Hataları Yönetir: Beklenen Promise reddedilirse, await bir istisna atar ve hataları etkili bir şekilde yakalamanıza ve yönetmenize olanak tanır.

Playwright'te await'in Pratik Örnekleri

Playwright komut dosyalarında await'in kullanıldığı bazı yaygın senaryoları inceleyelim:

1. Gezinme

test('Bir sayfaya git', async ({ page }) => {
  await page.goto('https://example.com');
  // Komut dosyası, devam etmeden önce sayfanın yüklenmesini bekler
});

Bu örnekte, await gezinmenin tamamlanmasını sağlar.

2. Öğelerle Etkileşim

test('Bir butona tıkla', async ({ page }) => {
  await page.click('#submit-button');
  // Komut dosyası, tıklama eyleminin tamamlanmasını bekler
});

Burada, await tıklama eyleminin tamamen yürütülmesini sağlar.

3. Öğeleri Bekleme

test('Öğenin görünmesini bekle', async ({ page }) => {
  await page.waitForSelector('#dynamic-content');
  // Komut dosyası, öğe görünür hale gelene kadar duraklar
});

Bu durumda, await komut dosyasını belirtilen öğe sayfada görünür hale gelene kadar durdurur.

4. Onaylar

test('Sayfa başlığını kontrol et', async ({ page }) => {
  await expect(page).toHaveTitle('Beklenen Başlık');
  // Onay eşzamansız olarak değerlendirilir
});

await, onayların düzgün bir şekilde değerlendirilmesini sağlamak, koşulun karşılanmasını beklemek veya karşılanmazsa zaman aşımına uğramak için onaylarla birlikte kullanılır.

Playwright'te await'in Önemi

Playwright'te await'i doğru kullanmak çeşitli nedenlerle çok önemlidir:

Senkronizasyon: Eşzamansız işlemleri senkronize etmeye yardımcı olur, yarış koşullarını önler ve eylemlerin istenen sırada gerçekleştirilmesini sağlar.

Güvenilirlik: await, işlemlerin tamamlanmasını bekleyerek testleri daha güvenilir hale getirir ve kırılganlığa daha az eğilimli hale getirir.

Hata Yönetimi: Doğru hata yayılımına izin verir, testlerinizdeki sorunları belirlemeyi ve hatalarını ayıklamayı kolaylaştırır.

Okunabilirlik: await, eşzamansız kodu daha okunabilir ve anlaşılması kolay hale getirir, çünkü eşzamansız kodu daha doğrusal, eşzamanlı görünen bir şekilde yazmanıza olanak tanır.

Yaygın Tuzaklar ve En İyi Uygulamalar

await güçlü olsa da, kaçınılması gereken bazı yaygın tuzaklar ve izlenmesi gereken en iyi uygulamalar vardır:

1. await Kullanmayı Unutmak

En yaygın hatalardan biri, eşzamansız bir işlemden önce await kullanmayı unutmaktır. Bu, beklenmedik davranışlara ve yarış koşullarına yol açabilir.

Yanlış:

test('Yanlış kullanım', async ({ page }) => {
  page.click('#button'); // Bu yanlıştır
  expect(page.locator('#result')).toBeVisible();
});

Doğru:

test('Doğru kullanım', async ({ page }) => {
  await page.click('#button');
  await expect(page.locator('#result')).toBeVisible();
});

2. await'i Aşırı Kullanmak

Eşzamansız işlemler için await kullanmak önemli olsa da, aşırı kullanmak gereksiz sıralı yürütmeye yol açabilir ve eşzamansız programlamanın faydalarını azaltabilir.

Daha Az Verimli:

test('Sıralı yürütme', async ({ page }) => {
  await page.fill('#field1', 'value1');
  await page.fill('#field2', 'value2');
  await page.fill('#field3', 'value3');
});

Daha Verimli:

test('Paralel yürütme', async ({ page }) => {
  const [field1, field2, field3] = await Promise.all([
    page.fill('#field1', 'value1'),
    page.fill('#field2', 'value2'),
    page.fill('#field3', 'value3')
  ]);
});

3. await'i Async Fonksiyonların Dışında Kullanmak

await'in yalnızca async fonksiyonların içinde kullanılabileceğini unutmayın. Dışarıda kullanmak bir sözdizimi hatasına neden olacaktır.

Yanlış:

test('Yanlış kullanım', ({ page }) => {
  await page.goto('https://example.com'); // Bu bir hataya neden olacaktır
});

Doğru:

test('Doğru kullanım', async ({ page }) => {
  await page.goto('https://example.com');
});

4. Hataları Yönetmek

await kullanırken olası hataları yönetmek için her zaman try-catch blokları veya .catch() yöntemlerini kullanın.

test('Hata yönetimi', async ({ page }) => {
  try {
    await page.click('#non-existent-button');
  } catch (error) {
    console.error('Bir hata oluştu:', error);
  }
});

Playwright'te await'in Gelişmiş Kullanımı

Playwright konusunda daha yetkin hale geldikçe, await'in çok önemli bir rol oynadığı daha gelişmiş senaryolarla karşılaşacaksınız:

1. Özel Onaylar

Özel onaylar oluştururken, onay mantığı içindeki eşzamansız işlemleri yönetmek için await kullanmanız gerekebilir.

expect.extend({
  async toHaveCorrectApiResponse(page, expectedResponse) {
    const response = await page.evaluate(() => fetchApiData());
    return {
      pass: JSON.stringify(response) === JSON.stringify(expectedResponse),
      message: () => `Beklenen API yanıtının ${expectedResponse} ile eşleşmesi bekleniyor`
    };
  }
});

test('Özel onay', async ({ page }) => {
  await expect(page).toHaveCorrectApiResponse({ status: 'success' });
});

2. Birden Fazla Promise'i Yönetmek

Karmaşık senaryolarda, birden fazla promise'i eşzamanlı olarak yönetmeniz gerekebilir. Promise.all() yöntemi, await ile birleştirildiğinde bu gibi durumlarda kullanışlıdır.

test('Birden fazla promise'i yönet', async ({ page }) => {
  const [navigationPromise, dialogPromise] = await Promise.all([
    page.waitForNavigation(),
    page.waitForEvent('dialog'),
    page.click('#submit-button')
  ]);

  await dialogPromise.accept();
  await navigationPromise;
});

3. Koşullu Bekleme

Bazen, oluşup oluşmayacağı belli olmayan bir koşulu beklemeniz gerekebilir. Bu tür senaryoları yönetmek için bir zaman aşımı ile try-catch kullanabilirsiniz.

test('Koşullu bekleme', async ({ page }) => {
  try {
    await page.waitForSelector('#popup', { timeout: 5000 });
    await page.click('#close-popup');
  } catch (error) {
    // Popup görünmedi, teste devam et
  }
});

Playwright'i Apidog ile Entegre Etme

Playwright'i Apidog ile entegre etmek, testinizi bir sonraki seviyeye taşıyabilir. Apidog, web uygulamanızın hem ön uçta hem de arka uçta doğru bir şekilde çalışmasını sağlayarak Playwright testlerinizi tamamlayabilen sağlam API tasarımı, dokümantasyon ve test araçları sağlar.

API'nizi Apidog ile Gönderme

Artık çalışan bir API'niz ve bir React ön ucunuz olduğuna göre, API'nizi test etme zamanı. Apidog bunun için harika bir araçtır.

Adım 1: Apidog'u açın ve yeni bir istek oluşturun.

Adım 2: Test düzenleyicisinde, API uç noktanızın URL'sini girin, HTTP yöntemini seçin ve ihtiyacınız olan tüm başlıkları, parametreleri veya gövde verilerini ekleyin. Örneğin, daha önce oluşturduğumuz basit bir mesaj döndüren rotayı test edebilirsiniz:

Adım 3: Gönder düğmesine tıklayın ve testinizin sonucunu görün. Durum kodunu, yanıt süresini ve API'nizin yanıt gövdesini görmelisiniz. Örneğin, şuna benzer bir şey görmelisiniz:

Apidog, API'lerinizi test etmek için harika bir araçtır, çünkü web hizmetlerinizin kalitesini, güvenilirliğini ve performansını sağlamanıza yardımcı olur. Ayrıca, API'lerinizi test etmek için herhangi bir kod yazmanıza veya herhangi bir yazılım yüklemenize gerek olmadığından, size zaman ve çaba tasarrufu sağlar. Sadece tarayıcınızı kullanabilir ve Apidog'un kullanıcı dostu arayüzünün ve özelliklerinin keyfini çıkarabilirsiniz.

Sonuç

Playwright'te await'in ne yaptığını anlamak, etkili ve güvenilir testler yazmak için çok önemlidir. Async/await'ten yararlanarak, test komut dosyanızın her adımının doğru sırada yürütülmesini sağlayabilir, olası sorunları önleyebilir ve testlerinizin sürdürülebilirliğini artırabilirsiniz.

Test araç setinizi daha da geliştirmek için Apidog'u ücretsiz indirmeyi unutmayın. Playwright ve Apidog birleştirildiğinde, hem ön uç hem de arka uç testi için kapsamlı bir çözüme sahip olacaksınız.