Powrót do: Playwright Elements – Kluczowe koncepcje automatyzacji testów

Event Listeners – czyli nasłuchiwanie zdarzeń podczas testów

TIP: Praktyczne przykłady zastosowania nasłuchiwania zdarzeń we frameworku np this.page.on('dialog' omawiamy również w naszym Programie Profesjonalna Automatyzacja z Playwright np w lekcji o rozszerzaniu testów e2e (🔒 dostęp dla posiadaczy Programu)

Kod do lekcji

Cały kod do tej lekcji znajdziesz w naszym oficjalnym repozytorium: jaktestowac/playwright-event-listeners

Nasłuchiwanie zdarzeń w Playwright

Podczas automatyzacji testów w Playwright możemy reagować na różne zdarzenia np. odpowiedź z back-endu czy pojawienie się błędu w konsoli.

Do tego celu wykorzystujemy metodę page.on(), która korzysta z mechanizmu EventEmitter w Node.js.
Dzięki niej możemy nasłuchiwać zdarzeń (równolegle, czyli w tym samym czasie co testy!) i wykonywać dowolny kod w odpowiedzi na wystąpienie takiego zdarzenia.

TIP: Jak opisać page.on w prostych słowach?

Wyobraź sobie, że Twój test to koncert, na którym muzycy (Twoja aplikacja) grają utwór.

Ty siedzisz i obserwujesz, czy wszystko przebiega poprawnie.
W tym czasie w tle czujny ochroniarz (czyli page.on('console')) nasłuchuje, czy wśród publiczności lub na scenie nie pojawia się alarm np. ktoś krzyknie, coś spadnie albo wydarzy się coś, co może wymagać uwagi.

  • Koncert (test) trwa dalej bez przerwy.
  • Ochroniarz (listener) reaguje na niepokojące zdarzenie (ale nie przerywa koncertu!).
  • Po występie możesz sprawdzić na co reagował ochroniarz.

.

Podstawowa składnia

Podstawowa składnia page.on ma następująca postać:

page.on('eventName', callbackFunction)
  • ‘eventName’ – nazwa zdarzenia, np. 'console', 'request', 'pageerror'
  • callbackFunction – funkcja, która wykona się, gdy zdarzenie wystąpi

Przykład: Nasłuchiwanie błędów w konsoli

    page.on("console", (msg) => {
        console.log("Log z przeglądarki:", msg.text())
    })

Ten kod (jeśli umieścimy go na początku lub przed testem!) przechwyci wszystkie logi z konsoli strony.
Dzięki temu możemy np. wykryć nieoczekiwane błędy JavaScript podczas testów.

    const errorMessages: string[] = []
    page.on("console", (message) => {
        if (message.type() === "error") {
            errorMessages.push(message.text())
        }
    })


    // ... test


    expect(errorMessages.length).toHaveLength(0) // oczekujemy braku błędów w konsoli

W powyższym przykładzie przechwytujemy wyłącznie błędy i zapisujemy je w tablicy.
Na końcu testu możemy sprawdzić, czy w konsoli nie pojawiły się żadne błędy runtime lub brakujące zasoby.

TIP: Jeżeli wykryjesz w konsoli błędy (np. brakujące obrazki, nieobsłużone wyjątki), test może automatycznie zgłosić błąd.

To prosty sposób na wykrywanie różnych ukrytych problemów w aplikacji 😉

Przykład: Nasłuchiwanie błędów z backendu

    page.on("response", (data) => {
        if (data.status() === 500) {
            console.error(`❌ Error response: ${data.status()} for ${data.url()}`)
        }
    })

W ten sposób zarejestrujemy wszystkie błędy (odpowiedzi o statusie 500) występujące w trakcie wykonywania różnych akcji na stronie.

Cały kod testu mógłby wyglądać w następujący sposób (zauważ, że nasłuchiwaniu jest ustawione na samym początku!):

import { test, expect } from "@playwright/test"


test("simple order submission", async ({ page }) => {
    page.on("response", (data) => {
        if (data.status() === 500) {
            console.error(`❌ Error response: ${data.status()} for ${data.url()}`)
        }
    })


    // Arrange:
    // generate a random user name
    const userName = `User_${Math.floor(Math.random() * 1000)}`
    const nameInput = page.getByTestId("customer-name-input")
    const orderItemSelect = page.getByTestId("item-name-input-1")
    const submitButton = page.getByTestId("submit-order-btn")
    const ordersList = page.getByTestId("orders-list")


    await page.goto("/practice/restaurant-order.html")


    // Act:
    await nameInput.fill(userName)
    await orderItemSelect.selectOption("Classic Burger")
    await submitButton.click()


    // Assert:
    // Simple check that the order was added to the list
    await expect(ordersList).toContainText(userName)
    // In real tests, you would check more specific details of the order!
})

Inne popularne zdarzenia

  • 'request' – wywoływane przy każdym wysłanym żądaniu HTTP
  • 'response' – wywoływane przy każdej odpowiedzi HTTP
  • 'framenavigated' – gdy dowolna ramka przejdzie na inną stronę
  • 'popup' – gdy pojawi się nowe okno lub karta
  • wszystkie aktualne zdarzenia, które możemy monitorować znajdziesz w oficjalnej dokumentacji events
TIP: Jeśli dopiero zaczynasz, potraktuj zdarzenia jak różne “dzwonki” informujące Cię, że coś się wydarzyło (w konsoli przeglądarki lub na back-endzie).

Twoje testy, w zależności od twojej implementacji, mogą na to reagować w odpowiedni sposób. Takim najprostszym przykładem jest wypisanie informacji o błędzie na konsoli 😉

Skąd pobrać aplikację GAD?

Aplikację 🦎GAD znajdziesz w naszym oficjalnym repozytorium: GitHub / 🦎GAD

Aplikację możesz pobrać na dwa sposoby:

Aby uruchomić aplikację 🦎GAD, przejdź do jej katalogu głównego.
Poznasz go po zawartości w postaci plików README.md oraz package.json.

Następnie uruchom polecenie do instalacji wymaganych paczek:

npm ci

Po instalacji wymaganych paczek, możesz uruchomić 🦎GADa za pomocą polecenia:

npm run start

Zewnętrzne linki i zasoby

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *