Powrót do: Playwright z AI

Playwright MCP (Model Context Protocol) i różne przykłady wykorzystania

UWAGA: Więcej szczegółów i informacje o wymaganych konfiguracjach znajdziesz pod nagraniem 😉

TIP: Przed rozpoczęciem pracy upewnij się, że:

  • korzystasz z wersji VS Code min. 1.99.2
  • jesteś zalogowany w VS Code na swoje konto z GitHuba
  • na koncie GitHub masz aktywnego CoPilota
  • masz włączoną opcję Chat › Agent: Enabled w User Settings (dostępne przez CTRL + SHIFT + P)
  • masz włączoną opcję Chat › Mcp: Enabled w User Settings (dostępne przez CTRL + SHIFT + P)
  • w terminalu w VS Code wykonałeś polecenie (na Windows): 
    code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

    lub:

    code --add-mcp '{\"name\":\"playwright\",\"command\":\"npx\",\"args\":[\"@playwright/mcp@latest\"]}'

    aby dodać serwer playwright/mcp do VS Code

Domyślna konfiguracja serwera Playwright MCP:

"mcp": {
    "servers": {
        "playwright": {
            "command": "npx",
            "args": [
                "@playwright/mcp@latest"
            ]
        }
    }
}
UWAGA: Zarówno Copilot Agent jak i playwright-mcp są w bardzo wczesnych wersjach.

Oznacza to, że ich działanie, możliwości, otrzymywane wyniki oraz sposób wykorzystania może się zmienić w przyszłości!

TIP: Lekcje tą realizujemy w oparciu o naszą autorska i darmową aplikację do testów 🦎GAD.

Jej instalacja jest ultra prosta i wymaga posiadania jedynie node.js 😉

Więcej o niej możesz poczytać w lekcjach i materiałach:

Najważniejsze skróty klawiszowe w VS Code

Otworzenie okna Copilota:

CTRL + SHIFT + I

Otworzenie poleceń w górnym menu (Command Palette):

CTRL + SHIFT + P

Otworzenie terminala:

CTRL + `

Wyszukiwanie informacji na stronach

Przykładowe polecenie do wyszukania informacji w sieci:

visit official Playwright repository on gitHub and find all issues that were reported by jaktestowac.pl

Tworzenie testów automatycznych

UWAGA: VS Code i GitHub Copilot nieustannie się zmienia. Aktualnie w promptach dobrze jasno definiować z jakich MCP i narzędzi agent powinien korzystać:


use #microsoft/playwright-mcp to open localhost:3000, find registration page and propose 2 e2e tests for user registration and login with same user

Zauważ tutaj konstrukcję #microsoft/playwright-mcp która jawnie i jasno wskazuje na wykorzystanie MCP 😉

Przykładowe polecenie do przygotowania testów rejestracji i logowania:

open localhost:3000, find registration page and propose 2 e2e tests for user registration and login with same user

Przykładowe polecenie, aby agent znalazł rozwiązanie na popup z wyborem daty, który zasłania przycisk Register:

after clicking 'Enter Birth Date' there is a popup with date picker - open registration page and find the way to close it before clicking register button

Dobre praktyki pracy z Copilotem i agentem

  • Wiedza techniczna jest kluczowa, aby weryfikować sugestie AI
    Wiedza techniczna (na temat programowania czy danego narzędzia) pozwala skutecznie identyfikować błędy oraz nieprawidłowe zastosowanie mechanizmów proponowanych przez AI.
    AI może zaproponować rozwiązanie oparte na starszej wersji biblioteki lub błędnym założeniu. Jednak jeśli posiadasz wiedzę na dany temat to szybko wyłapiesz takie sytuacje.
  • Opisuj problem precyzyjnie i konkretnie
    Im dokładniej opiszesz problem, tym bardziej trafne będą odpowiedzi od AI.
    Zamiast: fix this, napisz: fix error that appears when clicking Register button and date picker is still open.
  • Używaj języka poleceń (imperatywnego)
    Krótkie, konkretne polecenia prowadzą do bardziej zrozumiałych i trafnych wyników.
    Zamiast pisać pytania typu: can you maybe try to..., użyj bezpośrednich instrukcji, np.: generate a selector for the login button, identify the cause of the "Network Error" message after submitting form.
  • Testuj pomysły od AI krok po kroku
    Sprawdzaj każdą zmianę osobno, zanim wdrożysz całość rozwiązania. Dzięki temu unikniesz narastania błędów.
    Na przykładzie:

    • first, propose a way to close date picker popup programmatically
    • then, suggest how to verify if the popup has successfully closed
    • finally, click the Register button and verify successful registration
  • Przy problemach – opisuj dokładnie co się dzieje
    Zamiast: doesnt work, napisz: click on the date field triggers a popup that blocks the Submit button.
  • Używaj Copilota do inspiracji, nie jako jedynego źródła prawdy
    AI daje sugestie, ale ostateczna decyzja należy do Ciebie. Weryfikuj zgodność rozwiązań z wymaganiami projektu oraz standardami kodowania.
    Np. po wygenerowaniu kodu zapytaj siebie: “Czy to rozwiązanie pasuje do naszych standardów jakości? Czy da się je uprościć?”
  • Ucz się na podstawie odpowiedzi AI
    Analizuj odpowiedzi zamiast ich biernego kopiowania.
    Zadawaj pytania pogłębiające zrozumienie, np.: why did you choose querySelectorAll instead of querySelector? albo why is await important in this context?.
  • Eksperymentuj z różnymi sformułowaniami
    Jeśli odpowiedź jest nieprecyzyjna – spróbuj inaczej opisać problem. Np. zamiast find register form napisz go to registration page and locate the form with fields: username, email, password.
  • Dodaj ograniczenia lub wymagania do promptu
    Przykład: propose 2 tests for registration - one valid, one invalid with missing password.
  • Iteruj małymi krokami
    Zamiast prosić o rozwiązanie całego problemu naraz, rozbij go na mniejsze etapy. Np.:

    • najpierw poproś o analizę błędu, potem o poprawkę, a na końcu o test
    • przy naprawie błędów skupiaj się na jednym naraz
    • przy refaktoryzacji skupiaj się na jednym fragmencie kodu lub na jednej praktyce/wzorcu

Zewnętrzne linki i zasoby

Czym jest MCP?

9 komentarzy

  1. hej,

    dostałem taki komunikat:
    I am unable to directly retrieve a list of issues reported by jaktestowac.pl from the Playwright GitHub repository due to limitations in automated access.

    Kursanci ruszyli z zadaniami czy to umnie mogę coś zmienić?

    pozdrawiam

    Avatar Jarosław Obrzut
    Odpowiedz

    1. Hmm albo to GitHub wprowadził jakieś limity i zabezpieczenia przed botami/AI/MCP 😉
      Do sprawdzenia działania MCP możesz spróbować wykorzystać inną stronę (nawet naszego GADa, jesli masz go uruchomionego lokalnie – to najbezpieczniejszy sposób) 😉

      Krzysiek Kijas Krzysiek Kijas
      Odpowiedz

  2. Powiem wprost,
    Dawałem agentowi specjalnie ogólne i rozbudowane polecenia – gubił się mocno ale po 4 h ok doszliśmy do jakiejś wspólnej wersji – oczywiście do mocnego refaktoringu i updatu ale widać, że jest moc – ciekawe jak się zachowa jak już ustalimy konkretny wzór pierwszego testu i będziemy dodawali kolejne, a potem budowa architektury to będzie fun – coś czuję.
    Super sprawa z tym Agentem

    Dzięki, że zabraliście się za ten temat – to rzeczywiście rewolucja w testach 🙂

    Pozdrawiam i spokojności życzę 🙂

    Avatar Jakub Kruszyński
    Odpowiedz

    1. Dzięki za szczery feedback! Właśnie takie eksperymenty są najcenniejsze 💪

      Mam wrażenie, że to, co opisałeś, to esencja pracy z Agentem.
      Warto jak najszybciej zamrozić pierwszą dobrą wersję testu (jako kanoniczny przykład) i na jego bazie budować kolejne przez kopiowanie + adaptację.
      A dopiero potem ucz Agenta przez refaktor i podbijanie abstrakcji.

      No i nie bój się bardzo konkretnych, wręcz szablonowych promptów. Na tym etapie najwięcej daje danie Agentowi klucza do struktury – “zawsze pisz test w takim układzie, z takimi krokami, z takimi nazwami, z takim komentarzem nad testem”.
      Trochę jak pair programming z bardzo zdolnym, ale rozkojarzonym juniorem😉
      Z doświadczenia powiem, że najlepiej sprawdzają się bardzo niewielkie i jednocześnie bardzo dokładnie opisane polecenia.
      Również warto zadbać o ograniczenie liczby narzędzi i serwerów MCP (poprzez ich wyłączenie), bo nie raz mój agent korzystał nie z tego serwera MCP co powinien 😅
      A także warto czasem stworzyć nowy czat z nowym kontekstem, szczególnie gdy w poprzednim Agent zamotał się i nie możemy zmusić go do wykonania opisanych zadań😉

      Dzięki za eksperymenty i wnioski i powodzenia! 💪

      Krzysiek Kijas Krzysiek Kijas
      Odpowiedz

      1. Hej hej Krzysiu,
        Dzięki bardzo za podzielenie się swoimi doświadczeniami z agentem poleciłem mu dzisiaj bez większego wprowadzenia utwrzyć plik do zmiennych środowiskowych i zapisywać tam dane do testu rejestracji – mój błąd był taki że zapomniałem, że przy rejestracji email musi być unikatowy – także trochę mi zajęło aby go zmusić do obejścia tego ale nie ułatwiałem mu zadania tak samo jak nie ułatwiałem mu zadania przy dostosowywaniu lokatorów – więc w obecnym momencie zostawiłem test do mocnej refaktoryzacji aby go użyć jako testu przykładowego – ale krok po kroku porozmawiam z agentem aby dostosował najlepsze lokatory – ale np jak mu poleciłem zrobić strukturę wzorca AAA – to nie miał z tym w ogóle problemu – zabawa z nim trochę mnie “wciągła” i zbarłożyłem trochę czasu ale myślę że finalnie odniesie to swój skutek także krok po kroku po spokojności ale do przodu – co do multi serwerów to masz rację gryzie się z tego co wywnioskowałem zapamiętując pracę na poprzednim serwerze i próbuje startować z ostatniego mimo że mu przekażywałem odpowiednią nazwę serwa – dlatego na chwilę obecną chyba konfiguracja jednego serwera i działanie na nim jest wyjściem – oki bo odleciałem.
        Ogólnie chodziło mi o to, że chciałem Wam podziękować za podjęcie tego tematu – na prawdę SZTOS 🙂

        Pozdrawiam i spokojności życzę 🙂

        Avatar Jakub Kruszyński
        Odpowiedz

  3. Tak jest, wszytko już działa poprawnie takze wielkie dzięki za ekspresowy fix!

    Swoją drogą zauważyłem znaczącą różnicę między odpowiedzią na pierwsze zadanie odnośnie wyszukania błędów zgłoszonych przez jaktestowac.pl na oficjalnej stronie z repo PW na GH.

    W moim przypadku zwrócił odpowiedź, że nie znalazł żadnych issues bo okazało się, że wyszukiwał po autorze “jaktestowac.pl” jak w prompcie a nie “jaktestowac.

    Jak już mu podpowiedziałęm aby wyszukał po poprawnej nazwie autora to z kolei zabrakło w odpowiedzi summary z całkowitą liczbą zgłoszonych, zamkniętych i otwartych issues, o ale pewnie wynika to z faktu że mcp ciągle jest zmieniane i odpowiedzi mogą się różnić 🙂

    Avatar Przemysław Leszczyński
    Odpowiedz

    1. Świetny punkt i dobry wniosek 😉
      Zarówno MCP, jak i modele ulegają zmianie – nawet przełączając się między GPT a Claude mozesz otrzymać bardzo różne wyniki (tu w sumie więcej zależy od modelu niz samego MCP).

      Przy definiowaniu promptów obowiązują te same zasady co przy komunikacji – jesli nie opiszemy dokładnie naszej potrzeby, to możemy dostać bardzo różne wyniki 😀
      A nawet przy bardzo dokładnym opisaniu potrzeb wyniki nie będą w 100% deterministyczne 😉

      Krzysiek Kijas Krzysiek Kijas
      Odpowiedz

  4. Hej,

    nie wiem czy tylko tak jest w moim przypadku (zakładam, że nie 🙂 ), ale nietsety nie widzę możliwości otwarcia nagrania w trybie pełnego ekranu. Czy byłaby możliwośc wrzucenia nagrania z możliwością wybrania full screen mode?

    Avatar Przemysław Leszczyński
    Odpowiedz

Dodaj komentarz

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