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

Powrót do: Playwright z AI

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

"mcp": {
    "servers": {
        "playwright": {
            "command": "npx",
            "args": [
                "@playwright/mcp@latest"
            ]
        }
    }
}

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

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

• Oficjalnym repozytorium serwera Playwright MCP: playwright-mcp
• Oficjalnym repozytorium naszej autorskiej aplikacji do nauki automatyzacji: GitHub / 🦎GAD
• Mini kurs, w którym opowiadamy szczegółowo o naszej aplikacji do testów: GAD – poznaj naszą autorską aplikację do nauki automatyzacji (🔒Tylko dla członków Programu Automatyzacja z Playwright)

Czym jest MCP?

• The Future of AI in VS Code: MCP Servers Explained!
• Model Context Protocol (MCP), clearly explained (why it matters)
• Oficjalna dokumentacja Model Context Protocol (MCP)