Pierwszy test Playwright dla WooCommerce

Pisałem już o testach k6 dla WooCommerce, które pomagają ocenić wydajność sklepu pod obciążeniem. Ale jest jeszcze jedna ważna rzecz - czy Twój sklep w ogóle działa poprawnie?

Czy klient może dodać produkt do koszyka? Czy checkout się generuje? Czy po aktualizacji wtyczki nie wysypało się coś, czego nie widać na pierwszy rzut oka?

Do tego właśnie służy Playwright.

Spis treści

Po co Ci testy Playwright?

Testy k6 odpowiadają na pytanie: jak szybko? Playwright odpowiada na pytanie: czy w ogóle działa?

Playwright to narzędzie od Microsoftu do automatycznego testowania aplikacji webowych. W praktyce uruchamia prawdziwą przeglądarkę i klika po Twoim sklepie tak, jak zrobiłby to klient. Otwiera stronę, dodaje produkt do koszyka, przechodzi do checkoutu - i sprawdza, czy wszystko poszło zgodnie z planem.

Dlaczego to ważne?

• Aktualizujesz WooCommerce, motyw albo wtyczkę - i chcesz wiedzieć, czy nic się nie zepsuło
• Wprowadzasz zmiany w kodzie - i chcesz mieć pewność, że checkout nadal działa
• Masz kilka wariantów produktów, kuponów, metod dostawy - i nie chcesz tego klikać ręcznie za każdym razem

Ręczne przeklikiwanie się przez cały proces zakupowy po każdej zmianie to strata czasu. Playwright robi to za Ciebie w kilka sekund.

Jak zacząć?

Instalacja

Potrzebujesz Node.js na swoim komputerze. Jeśli go jeszcze nie masz - pobierz go ze strony nodejs.org.

Następnie w terminalu:

npm init playwright@latest

Kreator zapyta Cię o kilka rzeczy - możesz spokojnie zatwierdzać domyślne opcje. Po chwili powstanie folder tests/ i plik konfiguracyjny playwright.config.ts.

Pierwszy test - dodanie do koszyka

Stwórz plik tests/woo-add-to-cart.spec.ts:

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

const STORE_URL = "https://twojsklep.pl"; // Zastąp adresem swojego sklepu

test("dodanie produktu do koszyka i przejście do checkoutu", async ({
  page,
}) => {
  // await = "poczekaj, aż ta operacja się zakończy, zanim przejdziesz dalej"
  // Bez await Playwright poleciałby do następnej linijki, nie czekając na wynik.

  // 1. Otwórz stronę produktu i poczekaj, aż się załaduje
  await page.goto(`${STORE_URL}/product/przykladowy-produkt/`);

  // 2. Banner cookies — zamknij go, żeby nie zasłaniał przycisków.
  //    Selektor i tekst przycisku zależą od wtyczki cookies w Twoim sklepie
  //    (tu: ConsentMagic). Odrzucenie cookies przyspiesza test,
  //    bo nie ładują się skrypty śledzące (Analytics, Facebook Pixel itp.).
  await page.getByRole("button", { name: "Wyłącz wszystko" }).click();

  // 3. Znajdź przycisk "Dodaj do koszyka" i upewnij się, że jest widoczny.
  //    expect(...).toBeVisible() to asercja — jeśli przycisk nie pojawi się
  //    w ciągu 5 sekund (domyślny timeout), test zakończy się błędem.
  const addToCartButton = page.locator('button[name="add-to-cart"]');
  await expect(addToCartButton).toBeVisible();
  await addToCartButton.click();

  // 4. Po kliknięciu "Dodaj do koszyka" WooCommerce wyświetla powiadomienie
  //    z linkiem do koszyka. W zależności od motywu może to być np. wysuwana
  //    tacka, notice bar, popup — szczegóły się różnią.
  //    Zawężamy selektor do kontenera mini-koszyka (#cart-popup),
  //    żeby nie trafić w inne linki .wc-forward na stronie.
  //    .first() bierze pierwszy pasujący element ("Zobacz koszyk").
  const viewCartButton = page.locator("#cart-popup a.wc-forward").first();
  await expect(viewCartButton).toBeVisible();
  await viewCartButton.click();

  // 5. Jesteśmy na stronie koszyka — sprawdź, czy produkt się w nim znalazł.
  //    .toHaveCount(1) sprawdza, że jest dokładnie 1 wiersz w tabeli koszyka.
  await expect(page.locator(".cart_item")).toHaveCount(1);

  // 6. Na koniec sprawdź, czy przycisk przejścia do zamówienia jest widoczny.
  //    Jeśli go nie ma — coś poszło nie tak z szablonem koszyka.
  const checkoutButton = page.locator(".checkout-button");
  await expect(checkoutButton).toBeVisible();
});

Uruchomienie

npx playwright test

I tyle. Playwright otworzy przeglądarkę, przejdzie przez scenariusz i powie Ci, czy wszystko zadziałało.

Chcesz zobaczyć, co się dzieje na ekranie? Dodaj flagę --headed:

npx playwright test --headed

A jeśli test się nie powiedzie, Playwright automatycznie zapisze zrzut ekranu i ślad (trace), dzięki któremu możesz krok po kroku odtworzyć co poszło nie tak:

npx playwright show-report

Co dalej?

Masz już pierwszy działający test. Teraz możesz go rozbudować:

Więcej scenariuszy

• Wyszukiwanie produktów
• Filtrowanie po kategoriach
• Logowanie klienta i sprawdzanie historii zamówień
• Testowanie kuponów rabatowych
• Sprawdzanie różnych metod płatności i dostawy

Kiedy uruchamiać testy?

Nie musisz odpalać testów po każdej zmianie na stronie. Wystarczy kilka kluczowych momentów:

• Aktualizacja WooCommerce — nowa wersja może zmienić strukturę koszyka, checkout lub sposób dodawania do koszyka. To najczęstsza przyczyna “cichych” awarii.
• Aktualizacja motywu — motyw odpowiada za layout i selektory CSS. Nowa wersja może zmienić klasę przycisku albo usunąć kontener, na którym opiera się test. Uwaga: to oznacza, że test może się wysypać, mimo że sklep działa poprawnie (tzw. false negative). Jeśli test padnie po aktualizacji motywu — najpierw sprawdź ręcznie, czy sklep faktycznie nie działa, a dopiero potem szukaj błędu w kodzie. Może się okazać, że wystarczy zaktualizować selektor w teście.
• Aktualizacja lub instalacja wtyczki — zwłaszcza wtyczki płatności, dostawy i koszyka. Konflikty między wtyczkami to klasyka WooCommerce.
• Zmiany w kodzie — własne snippety PHP, modyfikacje szablonu, nowe hooki. Łatwo coś zepsuć, nie zauważając tego od razu.
• Wyrywkowo, raz dziennie lub raz w tygodniu — nawet bez żadnych zmian po Twojej stronie, zewnętrzne serwisy (bramki płatności, API kurierów) mogą przestać odpowiadać. Regularny test daje Ci spokój, że sklep działa.

Jeśli chcesz to zautomatyzować, możesz podpiąć testy pod CI/CD (np. GitHub Actions) albo ustawić crona, który odpala npx playwright test o wybranej godzinie.

Testy wizualne

Playwright potrafi też robić screenshoty i porównywać je między uruchomieniami. Dzięki temu wychwycisz zmiany wizualne, których nie łapie żaden test funkcjonalny - np. rozjechany layout po aktualizacji motywu.

await expect(page).toHaveScreenshot("checkout-page.png");

Podsumowanie

Playwright to proste narzędzie, które daje Ci spokój ducha przy każdej zmianie w sklepie. Nie musisz od razu pisać setek testów - zacznij od jednego scenariusza i rozbudowuj go w miarę potrzeb.

W połączeniu z testami k6 masz komplet: wiesz, że sklep działa poprawnie i że działa szybko.

Przydatne linki

Playwright - oficjalna dokumentacja

Playwright - instalacja i szybki start

Testy k6 dla WooCommerce

Recepta na szybki WooCommerce

Jeśli potrzebujesz pomocy z wdrożeniem testów automatycznych dla Twojego sklepu - napisz do mnie.