Powrót do: AI_Testers vol. 1 – Bonusy (aktywnie rozwijane)

Spis treści

Pierwsze testy w Playwright! Terminal, headed i analiza kodu z AI

Co zrobimy w tej lekcji?

W tej lekcji uruchomisz pierwsze testy Playwright i zobaczysz, jak wygląda przykładowy test wygenerowany w projekcie.

Omówimy podstawowe elementy testu, takie jak test, expect, page, page.goto oraz async/await. Następnie uruchomimy testy z terminala w trybie domyślnym oraz w trybie headed, czyli z widoczną przeglądarką.

Na końcu wykorzystamy AI do wyjaśnienia kodu testu i uporządkowania najważniejszych pojęć.

A dokładniej:

Omówimy strukturę przykładowego testu Playwright
Wyjaśnimy podstawowe elementy: test, expect, page, async/await
Uruchomimy testy z terminala
Porównamy tryb headless i headed
Wykorzystamy AI do wyjaśnienia kodu

Przydatne linki

Repozytorium aplikacji Rolnopol: https://github.com/jaktestowac/rolnopol
Pisanie testów w Playwright: https://playwright.dev/docs/writing-tests

Krok 1: Uruchomienie testów w trybie headless

npx playwright test

Ta komenda uruchamia testy Playwright.

Domyślnie testy uruchamiają się najczęściej w trybie headless, czyli bez widocznego okna przeglądarki. Przeglądarka działa wtedy “w tle”, a wynik testów zobaczysz w terminalu.

W terminalu zobaczysz między innymi:

ile testów zostało uruchomionych,
które testy przeszły,
które testy nie przeszły,
ile trwało wykonanie testów,
ewentualne komunikaty o błędach.

Tryb headless jest przydatny, gdy chcesz szybko uruchomić testy i nie musisz obserwować każdego kliknięcia w przeglądarce.

Krok 2: Uruchomienie testów w trybie headed

Żeby zobaczyć, co test robi w przeglądarce, uruchom:

npx playwright test –headed

Flaga --headed oznacza, że przeglądarka będzie widoczna podczas wykonywania testów.

Różnica jest taka:

headless – przeglądarka działa w tle, szybciej i bez widocznego okna,
headed – przeglądarka otwiera się na ekranie i możesz obserwować kroki wykonywane przez test.

Tryb headed jest szczególnie przydatny:

na początku nauki,
podczas debugowania,
gdy chcesz zobaczyć, czy test klika i sprawdza właściwe elementy.

Krok 3: Omówienie przykładowego testu

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

test('has title', async ({ page }) \=\> {

    await page.goto('https://playwright.dev/');

    // Expect a title "to contain" a substring.

    await expect(page).toHaveTitle(/Playwright/);

});

test('get started link', async ({ page }) \=\> {

    await page.goto('https://playwright.dev/');

    // Click the get started link.

    await page.getByRole('link', { name: 'Get started' }).click();

    // Expects page to have a heading with the name of Installation.

    await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();

});

Najważniejsze elementy:

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

Ten import pobiera z Playwrighta dwie rzeczy:

test – funkcję do definiowania testu,
expect – mechanizm do sprawdzania oczekiwanego rezultatu.

test('example test', async ({ page }) \=\> {

Tutaj definiujemy test:

'example test' to nazwa testu,
async oznacza, że test wykonuje operacje asynchroniczne,
page reprezentuje stronę w przeglądarce, którą steruje Playwright.

await expect(page).toHaveTitle(/Playwright/);

Ta linia sprawdza, czy tytuł strony zawiera tekst Playwright.

To jest przykład asercji, czyli sprawdzenia, czy aplikacja zachowuje się tak, jak oczekujemy.

Krok 4: Wyjaśnienie testu z pomocą AI

Na początku nauki nie musisz rozumieć od razu każdego szczegółu składni. Możesz wykorzystać AI, żeby pomogło Ci przeanalizować kod.

Przykładowy prompt:

Wyjaśnij ten test Playwright linijka po linijce dla osoby początkującej.

Zwróć uwagę na import, test, expect, page oraz async/await.

Możesz też zapytać:

Które elementy tego testu są najważniejsze na początku nauki Playwrighta?

Albo:

Wyjaśnij różnicę między trybem headless i headed w Playwright.

AI przyda się szczególnie do:

wyjaśnienia składni,
zrozumienia komend,
uporządkowania najważniejszych pojęć,
analizy błędów z terminala.

Ważne: AI traktuj jako wsparcie w nauce, a nie jako źródło, któremu bezrefleksyjnie ufasz. Warto sprawdzać, czy odpowiedzi pasują do tego, co widzisz w projekcie.

Zadania dla Ciebie

Uruchom aplikację Rolnopol lokalnie:
npm run start
Uruchom testy w trybie domyślnym:
npx playwright test
Uruchom testy w widocznej przeglądarce:
npx playwright test –headed
Otwórz przykładowy test i znajdź w nim:
– test
– expect
– page
– page.goto
– async
– await
Poproś AI o wyjaśnienie przykładowego testu linijka po linijce.
Zapytaj AI, czym różni się tryb headless od headed.

Co dalej?

W kolejnej lekcji skupimy się w całości na Playwright UI.

Zobaczymy:

jak uruchomić UI mode,
jak analizować testy krok po kroku.

Radosław Wasik

QA Tech Lead, Content Creator
profil na LinkedIn

QA Tech Lead z wieloletnim doświadczeniem w testach manualnych i automatyzacji. Specjalizuje się w Playwright (JS/TS) oraz projektowaniu skalowalnych frameworków testowych, które wspierają stabilne procesy CI/CD.

Na co dzień prowadzi zespoły QA - wyznacza cele, planuje działania, wspiera rozwój testerów i usprawnia strategie testowe oraz procesy releasowe we współpracy z developerami i biznesem.

Przeprowadza również szkolenia dla QA, skupiając się na praktycznej automatyzacji testów, dobrych praktykach (m.in. Page Object Model), pracy z narzędziami oraz budowaniu podejścia jakościowego w zespołach produktowych. Aktywnie dzieli się wiedzą w internecie: na Instagramie @radwasik publikuje krótkie, przystępne materiały o testowaniu, automatyzacji i AI, a na blogu rwasik.pl rozwija tematy w formie artykułów, poradników i case studies z codziennej pracy.