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

Piszemy pierwszy test: click, fill, expect

Co zrobimy w tej lekcji?

W tej lekcji napiszemy pierwszy własny test Playwright dla aplikacji Rolnopol.

Do tej pory przygotowaliśmy środowisko, uruchamialiśmy testy, poznaliśmy Playwright UI i zobaczyliśmy, jak wybierać elementy na stronie za pomocą lokator pickera. Teraz wykorzystamy tę wiedzę w praktyce.

Stworzymy własny scenariusz testowy, który:

• otworzy aplikację Rolnopol,
• sprawdzi, czy strona główna została poprawnie załadowana,
• przejdzie do ekranu logowania,
• wpisze dane użytkownika,
• kliknie przycisk logowania,
• sprawdzi, czy użytkownik został zalogowany.

W trakcie lekcji użyjemy najważniejszych podstaw Playwrighta: page.goto, expect, click, fill oraz async/await.

Przydatne linki

• Repozytorium aplikacji Rolnopol: https://github.com/jaktestowac/rolnopol
• Asercje w Playwright: https://playwright.dev/docs/test-assertions
• Lokatory w Playwright: https://playwright.dev/docs/locators

1. Utworzenie nowego pliku testowego

W katalogu tests utwórz nowy plik:

tests/rolnopol.spec.ts

Pliki testowe w Playwright mają końcówkę .spec.ts. Dzięki temu łatwo rozpoznać, które pliki zawierają testy.

Na początku dodaj podstawową strukturę testu:

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

test('should open Rolnopol app', async ({ page }) \=\> {
    await page.goto('http://localhost:3000');
});

Ten test robi jedną rzecz: otwiera aplikację pod adresem http://localhost:3000.

Najważniejsze elementy:

• test definiuje pojedynczy test.
• page reprezentuje stronę w przeglądarce.
• page.goto() otwiera wskazany adres.
• await oznacza, że czekamy na zakończenie akcji, zanim test przejdzie dalej.

2. Pierwsze uruchomienie własnego testu

Aby uruchomić nowo utworzony test, użyj komendy:

npx playwright test e2e/rolnopol.spec.ts

Ta komenda uruchamia konkretny plik testowy. Dzięki temu nie musisz odpalać wszystkich testów w projekcie.

W terminalu zobaczysz wynik testu: informację, czy test przeszedł, ile trwał i czy pojawiły się błędy.

Możesz też uruchomić test w widocznej przeglądarce:

npx playwright test e2e/rolnopol.spec.ts \--headed

Flaga --headed powoduje, że przeglądarka otworzy się na ekranie. To przydatne na początku nauki, bo możesz zobaczyć, co test faktycznie robi.

Opcjonalnie możesz uruchomić Playwright UI:

npx playwright test \--ui

W UI mode możesz znaleźć swój test na liście, uruchomić go kliknięciem i przeanalizować jego wykonanie krok po kroku.

Na tym etapie test tylko otwiera stronę. To jeszcze nie jest pełny test funkcjonalny, ponieważ niczego nie sprawdza – żeby test faktycznie weryfikował działanie aplikacji, potrzebujemy asercji.

3. Rozbudowa testu

Rozbudujemy test tak, aby wykonał prosty scenariusz logowania.

Finalny kod testu:

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

test('should open Rolnopol app', async ({ page }) \=\> {
    await page.goto('http://localhost:3000');

    await expect(page.locator('\#home-legacy-header').getByText('Rolnopol')).toBeVisible();

    await page.getByTestId('nav-login').click();
    await expect(page.getByRole('heading', { name: 'Login to Your User Account' })).toBeVisible();
    await expect(page).toHaveURL('https://localhost:3000/login.html');

    await page.getByTestId('email-input').fill('demo@example.com');
    await page.getByTestId('password-input').fill('demo123');
    await page.getByTestId('login-submit-btn').click();

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

Ten test wykonuje kilka kroków:

1. Otwiera aplikację Rolnopol.
2. Sprawdza, czy na stronie głównej widoczny jest tekst Rolnopol.
3. Klika link/przycisk logowania.
4. Sprawdza, czy pojawił się ekran logowania.
5. Sprawdza, czy adres strony zmienił się na /login.html.
6. Wpisuje email.
7. Wpisuje hasło.
8. Klika przycisk logowania.
9. Sprawdza, czy po zalogowaniu widoczny jest nagłówek Demo User.

4. Asercje

Asercja sprawdza, czy aplikacja jest w oczekiwanym stanie.

Przykład:

await expect(page.locator('\#home-legacy-header').getByText('Rolnopol')).toBeVisible();

Ta linia sprawdza, czy na stronie widoczny jest tekst Rolnopol.

Inny przykład:

await expect(page).toHaveURL('https://localhost:3000/login.html');

Ta linia sprawdza, czy po kliknięciu logowania użytkownik znajduje się na poprawnym adresie.

Test bez asercji może wykonać akcje, ale nie musi niczego zweryfikować. Dlatego expect jest jednym z najważniejszych elementów testów.

5. Click

Do kliknięcia elementu używamy metody click().

Przykład:

await page.getByTestId('nav-login').click();

Ta linia znajduje element o data-testid="nav-login" i wykonuje kliknięcie.

Przed kliknięciem Playwright próbuje znaleźć element i upewnić się, że może z nim wejść w interakcję.

Po kliknięciu warto dodać asercję, która sprawdza efekt akcji, np.:

await expect(page.getByRole('heading', { name: 'Login to Your User Account' })).toBeVisible();

Samo kliknięcie nie wystarcza, jeśli nie sprawdzamy, czy aplikacja zareagowała poprawnie.

6. Fill

Do wpisywania wartości w pola formularza używamy metody fill().

Przykład:

await page.getByTestId('email-input').fill('demo@example.com');

Ta linia znajduje pole email i wpisuje do niego wartość demo@example.com.

Drugi przykład:

await page.getByTestId('password-input').fill('demo123');

Ta linia wpisuje hasło do pola hasła.

Po wpisaniu danych można sprawdzić, czy pole ma oczekiwaną wartość albo czy aplikacja zareagowała poprawnie po wysłaniu formularza.

W naszym przypadku sprawdzamy efekt końcowy logowania:

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

7. Wstęp do async/await

Playwright wykonuje operacje, które potrzebują czasu.

Otwieranie strony, klikanie, wpisywanie danych i sprawdzanie elementów nie dzieje się natychmiast. Dlatego w testach Playwright bardzo często używamy await.

Przykład:

await page.goto('http://localhost:3000');
await page.getByTestId('nav-login').click();
await page.getByTestId('email-input').fill('demo@example.com');

await pomaga poczekać na zakończenie akcji, zanim test przejdzie do kolejnego kroku.

Brak await może powodować niestabilne lub błędne testy, bo kolejne linie mogą wykonać się za wcześnie.

Szczegóły asynchroniczności rozwiniemy w kolejnych lekcjach.

8. Użycie AI

W tej lekcji AI wykorzystamy do wyjaśnienia kodu i zaproponowania poprawek.

Przykładowy prompt:

You are an experienced QA automation engineer and Playwright mentor.

Please explain the following Playwright test to a beginner, step by step. Use simple language and explain what each line does.

After explaining the test, suggest practical improvements for a beginner-friendly but more reliable Playwright test.

Then provide an improved version of the test code with comments suitable for a beginner.

Please keep the explanation friendly, practical, and not too advanced.

AI może pomóc:

• wyjaśnić, co robi każda linia,
• wskazać trudniejsze fragmenty,
• zaproponować uproszczenia,
• dodać komentarze,
• zasugerować bardziej czytelną wersję testu.

Warto jednak pamiętać, że kod wygenerowany lub poprawiony przez AI zawsze trzeba uruchomić i sprawdzić w aplikacji.

Co dalej?

W kolejnej lekcji skupimy się na stabilności testów i lokatorach.

Omówimy:

• jak wybierać dobre lokatory,
• dlaczego niektóre testy są niestabilne,
• czym jest auto-waiting,
• czego unikać przy pisaniu testów,
• jak AI może pomóc w naprawie niestabilnych testów.

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.