Sprawdzaj stronę, którą otworzyło kliknięcie

Gdy kliknięcie otwiera popup albo nową kartę, sprawdzaj tamtą stronę. To, że karta otwierająca została na miejscu, nie dowodzi, że nowe okno działa.

#playwright #e2e #testing #qa-automation

Ten wpis jest częścią serii Podstawy Playwright. Jeśli pominąłeś poprzedni, przeczytaj Część 14 — Pliki, które użytkownik naprawdę wysyła.

Wprowadzenie — strona źródłowa się nie ruszyła

Test klika „Zapłać”. Kasa nadal jest na ekranie. Asercja na tej stronie przechodzi. Okno płatności otworzyło się za nią, pokazało błąd, a suite tam nie spojrzała.

Część 14 czekała na pobranie, bo sam klik nie dowodzi, że plik doszedł. Z popupem jest tak samo: liczy się strona, na którą patrzy użytkownik, a nie karta, która została w tle.

Czekaj na popup przed kliknięciem

waitForEvent('popup') rejestrujesz przed kliknięciem. Po kliknięciu okno może już istnieć, a późniejsze czekanie je przegapi.

test('shows the amount in the payment window', async ({ page }) => {
  await page.goto('/checkout');
  const popupPromise = page.waitForEvent('popup'); // okno, które otwiera to kliknięcie
  await page.getByRole('button', { name: 'Pay in a new window' }).click();
  const popup = await popupPromise;
  await expect(popup.getByRole('heading', { name: 'Pay 49.00' })).toBeVisible();
});

Decyzją jest czekanie na popup. Asercja na page po tym kliknięciu dowodzi tylko tego, że kasa nadal stoi.

Promise.all z czekaniem i kliknięciem to ta sama kolejność. Tak część 14 czekała na pobranie. Użyj formy, którą suite już ma. Nie klikaj najpierw i nie zaczynaj czekać dopiero potem.

Link z target="_blank" odpala to samo zdarzenie. Rola kontrolki nie ma znaczenia. Znaczenie ma to, że produkt otworzył inną stronę.

Nie wymyślaj okna

context.newPage() tworzy pustą kartę, której produkt nie otworzył. Sięgnij po tę metodę, gdy adres otwiera sam test. To złe narzędzie, gdy asercja brzmi „to kliknięcie otworzyło okno płatności”.

Jeśli sam otworzysz adres, pomijasz przycisk, window.open i token, który karta otwierająca dopisała do adresu. Zielony test znaczy wtedy, że /pay wczytuje się po wpisaniu. Nie znaczy, że kliknięcie działa.

Kliknięcie w tej samej karcie nie jest popupem

Jeśli produkt przechodzi na inny adres w tej samej karcie, waitForEvent('popup') czeka do timeoutu. Sprawdź, co aplikacja naprawdę robi. Zachodzi dokładnie jedna z tych sytuacji:

  • kliknięcie otwiera inną stronę — czekaj na popup i sprawdzaj tamtą
  • kliknięcie zostawia cię w tej karcie — sprawdzaj toHaveURL albo nagłówek na page

Nie zostawiaj czekania na popup „na wszelki wypadek” z długim timeoutem. Zawieszenie nie jest zaliczeniem.

Podsumowanie

Uruchom waitForEvent('popup') przed kliknięciem, które ma otworzyć okno. Sprawdzaj stronę, którą to czekanie zwraca. context.newPage() zostaw kartom, które test otwiera celowo. Jeśli produkt zostaje w tej samej karcie, w ogóle nie czekaj na popup.

Zadanie na ten tydzień: Znajdź jeden test, który klika kontrolkę z target="_blank" albo przycisk płatności, a potem sprawdza oryginalne page. Poczekaj na popup i przenieś asercję na to okno.

Następny wpis w serii: Część 16 — Kontrolki wewnątrz ramki.