Wprowadzenie do agentów Playwright

Wprowadzenie

W dynamicznym zmieniającym się narzędzi AI pozostawanie na bieżąco z trendami jest kluczowe. Po szybkim rozwoju modeli LLM oraz serwerów MCP uwaga przesuwa się obecnie w stronę agentów. Agenci mogą być tworzeni przez użytkowników lub dostarczani przez producentów narzędzi i frameworków. Integrują one modele LLM, narzędzia z serwerów MCP oraz różne polecenia i instrukcje, aby lepiej dopasować się do potrzeb użytkowników.

W tym artykule szczegółowo przyjrzymy się agentom Playwright, w jaki sposób mogą one przyspieszyć automatyzację testów, ograniczyć pracę manualną oraz pomóc w projektowaniu skutecznych scenariuszy testów UI.

Inicjalizacja agentów Playwright

npx playwright init-agents --loop=vscode

Za pomocą tego polecenia dodajemy agentów Playwright w Copilocie. Następnie wystarczy wybrać jednego z nich z listy agentów.

Planner agent

Rolą tego agenta jest otwarcie aplikacji, jej eksploracja oraz utworzenie planu testów dla jednego lub wielu komponentów. Generowanie planu za pomocą tego agenta możemy wykonać promptem:

Wygeneruj test plan dla formularza rejestracji użytkownika {link do formularza}

Plan testów jest tworzony w folderze spec Twojego projektu.

Warto zaznaczyć, że otrzymany plan testów zależy od promptu, który podasz. Jeśli dodasz dodatkowe warunki, zostaną one uwzględnione podczas tworzenia planu testów.

Generator agent

Jak łatwo się domyślić Generator agent automatycznie generuje kod testów. Działa podobnie do Planner agent, jednak podczas eksplorowania twojej strony internetowej tworzy kod testowy w czasie rzeczywistym.

Zaznaczmy to jeszcze raz, że otrzymany rezultat w dużym stopniu zależy od użytego promptu.

Na przykład, jeśli użyjesz prostego promptu:

 Generuj testy dla planu testów.

Możesz otrzymać kod niskiej jakości. Przykładowo, zamiast korzystać z wbudowanych lokalizatorów Playwrighta, takich jak page.getByRole wygenerowane testy mogą opierać się na selektorach CSS lub XPath. Takie podejścia powinny być stosowane wyłącznie w ostateczności, gdy nie ma lepszego sposobu na zlokalizowanie elementu.

Warto pamiętać bardziej szczegółowy i opisowy prompt jest lepszym podejściem do generowania testów.

Healer agent

Healer agent, pomaga analizować kod w przypadku niepowodzenia testu. Przechodzi on przez stronę na podstawie kroków, które zakończyły się błędem, ponownie weryfikuje lokatory, dodaje odpowiednie opóźnienia, poprawia dane testowe i za każdym razem ponownie uruchamia test — aż do momentu jego powodzenia lub do zatrzymania pętli przez mechanizmy ochronne (guardrails).

Aby uruchomić tego agenta, należy wybrać go z listy agentów i użyć promptu, takiego jak:

Fix the test {test_name}

Przykład

Przejdźmy razem przez proces automatycznego generowania planu testów oraz kodu testowego.

Pierwszym krokiem jest zainicjalizowanie nowego projektu Node.js dla Playwright:

npm init -y

Kolejnym krokiem jest zainicjalizowanie Playwrighta w projekcie:

npm init playwright@latest

Teraz musimy zainicjalizować agentów Playwright.

npx playwright init-agents --loop=vscode

W tym przykładzie użyjemy formularza rejestracyjnego przygotowanego do ćwiczeń z automatyzacją testów. https://practice.expandtesting.com/register

Aby utworzyć plan testów, wystarczy wybrać agenta playwright-test-planner z listy agentów Copilota i użyć następującego promptu:

Generate a test plan for this user register form https://practice.expandtesting.com/register

W rezultacie otrzymujemy gotowy do użycia plan testów w formacie Markdown, zawierający 14 przypadków testowych. Jest to bardzo dobra liczba testów jak na tak prosty formularz, jednak jak w przypadku każdego rezultatu wygenerowanego przez AI, nie należy mu bezkrytycznie ufać. Plan testów stanowi świetny punkt wyjścia, ale nadal wymaga przeglądu, oceny oraz poprawy.

Poniżej znajduje się przykład wygenerowanego przypadku testowego:

#### 1.1. Valid Registration with Strong Password

**File:** `tests/positive-registration/valid-registration-strong-password.spec.ts`

**Steps:**
  1. Navigate to the registration page
  2. Enter a valid username (e.g., 'testuser123')
  3. Enter a strong password (e.g., 'SecurePass123!')
  4. Enter the same password in the Confirm Password field
  5. Click the Register button
  6. Verify error message appears (expected behavior for testing site)
  7. Dismiss the error alert by clicking Close button

**Expected Results:**
  - Registration form is displayed with all required fields
  - All form fields accept valid input
  - Error message is displayed: 'An error occurred during registration. Please try again.'
  - Form fields are cleared after submission
  - Error alert can be dismissed with Close button

Teraz nadszedł czas na wygenerowanie kodu dla testu. W tym przykładzie możemy użyć powyższego testu.

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

test.describe('Positive Registration Tests', () => {
  test('Valid Registration with Strong Password', async ({ page }) => {

    await page.goto('https://practice.expandtesting.com/register');

    await page.getByRole('textbox', { name: 'Username' }).fill('testuser123');
    await page.getByRole('textbox', { name: 'Password', exact: true }).fill('SecurePass123!');
    await page.getByRole('textbox', { name: 'Confirm Password' }).fill('SecurePass123!');
    await page.getByRole('button', { name: 'Register' }).click();

    await expect(page.getByText('An error occurred during registration. Please try again.')).toBeVisible();

    await page.getByRole('button', { name: 'Close', exact: true }).click();
  });
});

Na tym etapie mamy w pełni działający przypadek testowy.

Ale co się stanie, jeśli w kodzie testu pojawi się problem? Na przykład wprowadźmy błąd, zmieniając Confirm Password na Confirm Pasword.

Teraz test zakończy się niepowodzeniem. W tym momencie przydatny staje się healer agent. Aby go użyć, przełącz agenta w Copilocie i uruchom następujący prompt:

Napraw test 'Valid Registration with Strong Password'

W trakcie procesu wnioskowania AI wykrywa problem i zgłasza:

I can see there's a typo in the test - "Pasword" should be "Password" in the Confirm Password field locator.

Jak widać, agent szybko identyfikuje problem i automatycznie naprawia przypadek testowy.

Podsumowanie

Jak widać, Playwright dostarcza bardzo potężne narzędzia, które w prosty i przystępny sposób przyspieszają automatyzację testów. Możesz automatycznie generować kod testów na podstawie wygenerowanego planu testów. Dodatkowo Playwright pozwala zaoszczędzić czas i wysiłek podczas debugowania dzięki wykorzystaniu agenta typu healer, co sprawia, że korzystanie z Playwrighta jest jeszcze przyjemniejsze i skuteczniejsze niż wcześniej.

Mogę jedynie zachęcić Cię do samodzielnego wypróbowania agentów Playwright i sprawdzenia, jak agenci są konfigurowani w Visual Studio Code i Copilocie.