Prelekcja: Odważ się myśleć inaczej – nieszablonowe podejście do testów automatycznych z Playwright i AI

Świat testów często przypomina labirynt, pełen niepisanych reguł, wzorców i “jedynie słusznych” zasad.

Ale czy ich łamanie jest aż tak niebezpieczne?

Podczas tej prelekcji przyjrzymy się niektórym konwenansom.

Odkryjemy, czy czasem warto świadomie przełamać schematy, by uzyskać konkretne korzyści. Przekonasz się, w jaki sposób odważne podejście do reguł może:
– przełożyć się na większą elastyczność testów,
– usprawnić codzienną pracę,
– przyspieszyć dostarczanie wartości bez wpadania w pułapkę chaosu.

Jeśli chcesz świadomie zerwać z utartymi schematami, ta prelekcja jest dla Ciebie.
Poznasz świeżą perspektywę, nietuzinkowe rozwiązania i konkretną dawkę inspiracji.

Czasem to właśnie odejście od standardowych zasad pozwala osiągnąć lepsze wyniki w testach!

Data wydarzenia: 09 grudnia 2025 (Event date: December 9th, 2025)

Kim jesteśmy?

Krzysiek Kijas
Senior Software Quality Engineer, Tech Lead, Mentor, Pelegent
Zwycięzca ogólnopolskiego plebiscytu
Ludzie Testowania 2024 (testerzy.pl)
Microsoft Most Valuable Professional (MVP)
profil na LinkedIn
Microsoft Most Valuable Professional (MVP)
O doświadczeniu...
  • Jako Tech Lead i Architekt QA projektuję strategie jakości i architekturę testów, które wspierają stabilność systemów, redukcję ryzyka i szybsze dostarczanie wartości biznesowej z wykorzystaniem różnych narzędzi (Playwright, CI/CD oraz rozwiązania oparte o AI).
  • Z obszarem jakości oprogramowania jestem związany od 2011 roku, pracując w projektach z różnych domen (finanse, transport, administracja, systemy enterprise).
  • Projektuję architekturę automatyzacji testów (od unit i API po E2E), dopasowaną do architektury systemu i kluczowych atrybutów jakościowych (np. wydajność, testowalność, niezawodność).
  • Buduję i optymalizuję procesy CI/CD (Jenkins, GitLab CI, Azure DevOps), gdzie automatyzacja testów pełni rolę mechanizmu kontroli jakości.
  • Od 2014 roku działam jako trener i prelegent (test:fest, TestWarez, ConSelenium i inne), dzieląc się praktyką z projektów i wspierając rozwój nowoczesnego podejścia do jakości.
  • Współtworzę jaktestowac.pl oraz AI_Testers, gdzie rozwijam materiały dla Nowoczesnych Testerów.
Przemek Barański
Senior Software Quality Engineer, Principal Engineer
Zwycięzca ogólnopolskiego plebiscytu
Ludzie Testowania 2024 oraz Ludzie Testowania 2025 (testerzy.pl)
Microsoft Most Valuable Professional (MVP)
profil na LinkedIn
Microsoft Most Valuable Professional (MVP)
O doświadczeniu...
  • Rozwija frameworki w Playwright do testów GUI oraz API zintegrowane z procesami CI/CD
  • Komercyjnym testowaniem oprogramowania zajmuje się od ponad 10 lat!
  • Specjalizuje się w tematach performance i automation, które praktycznie wykorzystuje przy zapewnieniu jakości dla globalnych systemów informatycznych.
  • Trenuje testerów od 2015, nie tylko online, ale też bezpośrednio na warsztacie, meetupie, konferencji czy uczelni.
  • Twórca bezpłatnych treści wspomagających testerów w całej Polsce ze stawianiem swoich pierwszych kroków w różnych obszarach testowania (vlog, Git dla Testerów, Podstawy Automatyzacji).
  • Zafascynowany technicznym rozwojem oraz upraszczaniem poznanych konceptów do łatwych i przyjemnych treści 😀
  • Tester nie tylko aplikacji ale i praktyk związanych z życiem, rozwojem i szeroko rozumianą jakością.

Jak wspieramy i dzielimy się wiedzą o Playwright?

Prezentacja

Prezentacje możesz pobrać klikając poniższy obrazek:

Lub za pomocą linka: Prezentacja

Darmowe materiały dodatkowe

Gdzie sprawdzać i eksperymentować z AI i automatami? Nasza darmowa aplikacja GAD🦎

GAD🦎 jest lekką, darmową aplikacją webową przeznaczoną do ćwiczeń związanych z testowaniem i automatyzacją.

Posiada w pełni funkcjonalne GUI, powiązane z API i systemem autoryzacji. Zawiera wiele elementów testowych takich jak przyciski, frame, loadery, sesje, cache, paginację, wyszukiwanie oraz różnego rodzaju bugi.
Aplikację uzyskasz tutaj: https://github.com/jaktestowac/gad-gui-api-demo.

TIP: Naszą aplikację GAD omawiamy w dedykowanej lekcji – Aplikacja do testów – gdzie będziemy testować koncepty automatyzacji?. Znajdziesz tam również sposób jej instalacji 😉
Kontynuuj z nami naukę na AI_Testers 😎

Testy A11y (accessibility, czyli dostępności) Playwright z Axe

Najprostszy test a11y z Playwright + Axe:

import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";


test.describe("Test a11y", () => {
  test("simple a11y test", async ({ page }) => {
    await page.goto("http://localhost:3000/practice/a11y/learn-ai-0.html");


    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();


    expect(accessibilityScanResults.violations).toEqual([]);
  });
});

Przykładowy raport po testach z linkami do dokumentacji o konkretnych regułach WCAG, które zostały naruszone (np. dequeuniversity.com/rules):

Raport na konsoli

1) [chromium] › tests\test-a11y.spec.ts:5:7 › test a11y › simple a11y test ───────────────────────

    Error: expect(received).toEqual(expected) // deep equality

    - Expected  -   1
    + Received  + 210

    - Array []
    + Array [
    +   Object {
    +     "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
    +     "help": "Elements must meet minimum color contrast ratio thresholds",
    +     "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=playwright",
    +     "id": "color-contrast",
    +     "impact": "serious",
    +     "nodes": Array [
    +       Object {
    +         "all": Array [],
    +         "any": Array [
    +           Object {
    +             "data": Object {
    +               "bgColor": "#007bff",
    +               "contrastRatio": 3.97,
    +               "expectedContrastRatio": "4.5:1",
    +               "fgColor": "#ffffff",
    +               "fontSize": "12.0pt (16px)",
    +               "fontWeight": "normal",
    +               "messageKey": null,
    +             },
    +             "id": "color-contrast",
    +             "impact": "serious",
    +             "message": "Element has insufficient color contrast of 3.97 (foreground color: #ffffff, background color: #007bff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
    +             "relatedNodes": Array [
    +               Object {
    +                 "html": "",
    +                 "target": Array [
    +                   "#btnPractice",
    +                 ],
    +               },
    +             ],
    +           },
    +         ],
    +         "failureSummary": "Fix any of the following:
    +   Element has insufficient color contrast of 3.97 (foreground color: #ffffff, background color: #007bff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1",
    +         "html": "",
    +         "impact": "serious",
    +         "none": Array [],
    +         "target": Array [
    +           "#btnPractice",
    +         ],
    +       },
    +       Object {
    +         "all": Array [],
    +         "any": Array [
    +           Object {
    +             "data": Object {
    +               "bgColor": "#e0e9fc",
    +               "contrastRatio": 4.24,
    +               "expectedContrastRatio": "4.5:1",
    +               "fgColor": "#2563eb",
    +               "fontSize": "9.0pt (12px)",
    +               "fontWeight": "normal",
    +               "messageKey": null,
    +             },
    +             "id": "color-contrast",
    +             "impact": "serious",
    +             "message": "Element has insufficient color contrast of 4.24 (foreground color: #2563eb, background color: #e0e9fc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
    +             "relatedNodes": Array [
    +               Object {
    +                 "html": "
    +                          Learn AI Practical Skills
    +                     ",
    +                 "target": Array [
    +                   ".ai-eyebrow",
    +                 ],
    +               },
    +               Object {
    +                 "html": "
",
    +                 "target": Array [
    +                   ".ai-hero",
    +                 ],
    +               },
    +             ],
    +           },
    +         ],
    +         "failureSummary": "Fix any of the following:
    +   Element has insufficient color contrast of 4.24 (foreground color: #2563eb, background color: #e0e9fc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
    +         "html": "
    +                          Learn AI Practical Skills
    +                     ",
    +         "impact": "serious",
    +         "none": Array [],
    +         "target": Array [
    +           ".ai-eyebrow",
    +         ],
    +       },
    +       Object {
    +         "all": Array [],
    +         "any": Array [
    +           Object {
    +             "data": Object {
    +               "bgColor": "#f0f0f0",
    +               "contrastRatio": 4.06,
    +               "expectedContrastRatio": "4.5:1",
    +               "fgColor": "#0275d8",
    +               "fontSize": "9.0pt (12px)",
    +               "fontWeight": "normal",
    +               "messageKey": null,
    +             },
    +             "id": "color-contrast",
    +             "impact": "serious",
    +             "message": "Element has insufficient color contrast of 4.06 (foreground color: #0275d8, background color: #f0f0f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
    +             "relatedNodes": Array [
    +               Object {
    +                 "html": "",
    +                 "target": Array [
    +                   "body",
    +                 ],
    +               },
    +             ],
    +           },
    +         ],
    +         "failureSummary": "Fix any of the following:
    +   Element has insufficient color contrast of 4.06 (foreground color: #0275d8, background color: #f0f0f0, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1",
    +         "html": "jaktestowac.pl",
    +         "impact": "serious",
    +         "none": Array [],
    +         "target": Array [
    +           "#footer-container > a[rel=\"noopener\"][href$=\"jaktestowac.pl\"][target=\"_blank\"]",
    +         ],
    +       },
    +     ],
    +     "tags": Array [
    +       "cat.color",
    +       "wcag2aa",
    +       "wcag143",
    +       "TTv5",
    +       "TT13.c",
    +       "EN-301-549",
    +       "EN-9.1.4.3",
    +       "ACT",
    +     ],
    +   },
    +   Object {
    +     "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
    +     "help": "Links must be distinguishable without relying on color",
    +     "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=playwright",
    +     "id": "link-in-text-block",
    +     "impact": "serious",
    +     "nodes": Array [
    +       Object {
    +         "all": Array [],
    +         "any": Array [
    +           Object {
    +             "data": Object {
    +               "contrastRatio": 2.1,
    +               "messageKey": "fgContrast",
    +               "nodeColor": "#0275d8",
    +               "parentColor": "#444444",
    +               "requiredContrastRatio": 3,
    +             },
    +             "id": "link-in-text-block",
    +             "impact": "serious",
    +             "message": "The link has insufficient color contrast of 2.1:1 with the surrounding text. (Minimum contrast is 3:1, link text: #0275d8, surrounding text: #444444)",
    +             "relatedNodes": Array [
    +               Object {
    +                 "html": "

    +     Version: v2.8.7
    +     © Copyright 2025
    +     jaktestowac.pl
    +     
",
    +                 "target": Array [
    +                   "#footer-container",
    +                 ],
    +               },
    +             ],
    +           },
    +           Object {
    +             "data": null,
    +             "id": "link-in-text-block-style",
    +             "impact": "serious",
    +             "message": "The link has no styling (such as underline) to distinguish it from the surrounding text",
    +             "relatedNodes": Array [
    +               Object {
    +                 "html": "

    +     Version: v2.8.7
    +     © Copyright 2025
    +     jaktestowac.pl
    +     
",
    +                 "target": Array [
    +                   "#footer-container",
    +                 ],
    +               },
    +             ],
    +           },
    +         ],
    +         "failureSummary": "Fix any of the following:
    +   The link has insufficient color contrast of 2.1:1 with the surrounding text. (Minimum contrast is 3:1, link text: #0275d8, surrounding text: #444444)
    +   The link has no styling (such as underline) to distinguish it from the surrounding text",
    +         "html": "jaktestowac.pl",
    +         "impact": "serious",
    +         "none": Array [],
    +         "target": Array [
    +           "#footer-container > a[rel=\"noopener\"][href$=\"jaktestowac.pl\"][target=\"_blank\"]",
    +         ],
    +       },
    +     ],
    +     "tags": Array [
    +       "cat.color",
    +       "wcag2a",
    +       "wcag141",
    +       "TTv5",
    +       "TT13.a",
    +       "EN-301-549",
    +       "EN-9.1.4.1",
    +     ],
    +   },
    + ]

       8 |     const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
       9 |
    > 10 |     expect(accessibilityScanResults.violations).toEqual([]);
         |                                                 ^
      11 |   });
      12 | });
      13 |
TIP: Aby zainstalować bibliotekę Axe w projekcie Playwright + TypeScript użyj tego polecenia:

npm i @axe-core/playwright

Więcej o tej bibliotece znajdziesz na stronie npmjs: npmjs.com/package/@axe-core/playwright

Testy wizualne z Simple Browser

Aby uruchomić Simple Browser w VS Code użyj kombinacji CTRL + SHIFT + P i wpisz: Simple Browser: Show

Możesz z Simple Browser korzystać jak z normalnej (ale okrojonej!) przeglądarki.
Jednocześnie możesz przekazywać wskazane elementy do Copilot Agenta!

Sprawdź poniższe nagranie gdzie pokazujemy jak to zrobić!

Własne Chat Modes (Custom Agents)

Chat Modes w VS Code to tryby działania dla Copilot Chat, które definiują zachowanie AI w zależności od zadania.

Umożliwiają definiowanie własnych “person” AI dla konkretnych zadań (np. planowanie, przegląd kodu, dokumentacja). Są definiowane w plikach .chatmode.md, które zawierają nagłówek (YAML frontmatter) z opisem, używanymi narzędziami i opcjonalnie modelem AI, a także ciało pliku (instrukcje w formacie markdown), czyli co AI ma robić w tym trybie.

Dzięki temu w swoim chat mode możemy zdefiniować instrukcje dla agenta aby przestrzegał określone reguły, albo aby się wcielił w daną personę (np. doświadczonego programistę).
Możemy też tam zdefiniować w jaki sposób ma pisać kod, aby zwracał uwagę na określone elementy, lub aby wykonywał konkretne testy (np a11y).

Więcej poczytasz w oficjalnej dokumentacji VS Code Use chat modes in VS Code

Playwright MCP (Model Context Protocol)

TIP: Darmowy kurs o AI i MCP z lekcjami, kodem i dodatkowymi materiałami znajdziesz w naszym kursie: Playwright MCP i automatyzacja z AI

Znajdziesz tam odrobinę teoriii i duzo praktycznych przykładów wykorzystania Playwright MCP.

Playwright z AI: Wprowadzenie do MCP (Model Context Protocol)

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

Playwright MCP i praktyczne zastosowania – dokumentacja, user journey i #A11y (accessibility)

Prompty dla Agenta AI

Wykorzystanie pliku sesji

Analiza grafik i tekstu na grafikach pod względem czytelności:

use #microsoft/playwright-mcp 
to enter http://localhost:3000/practice/a11y/banner-4.html 
and check any accessibility issues. 
Read text from images using OCR and check contrast.

(testowane na modelu GPT-5 + Copilot Agent)

Przykładowy wynik:

Raport na konsoli

Wykorzystanie pliku sesji

UWAGA: Wcześniej musisz przygotować plik storage state, który zawiera dane sesji – czyli cookies i local storage przeglądarki.

Przykładowy kod do przygotowania pliku storage state:

  // Act
  const welcomePage = await loginPage.login(userData);




  // Assert
  const title = await welcomePage.getTitle();
  expect(title).toContain(expectedWelcomeTitle);


  // Save storage state
  await page.context().storageState({ path: STORAGE_STATE });

Więcej o storage state znajdziesz w oficjalnej dokumentacji Playwright:
Authentication

Prompt dla Copilot Agent aby wykorzystał plik z localstorage:

use #microsoft/playwright-mcp 
and storage state file #file:session.json
to open localhost:3000 and open user profile

Pobieranie dokumentacji

Wykorzystanie MCP Context7 do pobrania informacji jakie najnowsze urządzenia iPhone obsługuje Playwright:

Prepare emulation config for newest iPhone 
with hashtag#context7 
using /microsoft/playwright library

albo:

Check newest mobile iPhone
with #upstash/context7 
using /microsoft/playwright library

(testowane na modelu GPT-5 + Copilot Agent)

UWAGA: Zawsze weryfikuj jakie informacje zwróci CI Agent!
Często zdarza się, że zbyt ogólny lub niepoprawnie skonstruowany prompt zwróci niepoprawne wyniki!

Taki prompt może dać inne wyniki!

#upstash/context7 check latest mobile iPhone for /microsoft/playwright library

Oficjalna strona Context7 z różnymi dokumentacjami https://context7.com/

Ustawienia pozwoleń dla MCP i Agenta w VS Code

Opcje są do wyszukania w User Settings.

Komendy wymagające zgody użytkownika:

chat.tools.terminal.autoApprove

YOLO mode:

chat.tools.terminal.autoApprove

Oficjalna dokumentacja VS Code o Auto-approve all tools and commands

Bonusy

Stagehand – nowe narzędzie rozszerzające Playwright o AI

Więcej poczytasz o Stagehand w poście Stagehand: Przełom w Automatyzacji Testów End-to-End. Znajdziesz tam praktyczne przykłady i repozytorium z całym kodem przykładowego projektu 😉

Jak to jest z używaniem AI? Analiza ankiety Stack Overflow Developer Survey 2025

Linki

Poniżej znajdziesz rozszerzenie różnych materiałów:

Kontynuuj z nami naukę na AI_Testers 😎