Playwright i testy w wielu przeglądarkach

Wstęp

W wpisie o Cypressie śledziłeś moment, w którym runner dostał Firefox i Edge oraz aktualizację do wersji 4.x. Playwright od początku traktuje wiele silników jako coś oczywistego: jedna instalacja (npx playwright install), jeden plik spec, wiele projektów.

Poprzedni odcinek: data-testid.

Projekty w playwright.config.ts

import { defineConfig, devices } from "@playwright/test"

export default defineConfig({
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
    { name: "webkit", use: { ...devices["Desktop Safari"] } },
  ],
})

Uruchomienie wszystkich:

npx playwright test

Tylko Firefox:

npx playwright test --project=firefox

Tylko Chromium:

npx playwright test --project=chromium

Nie musisz przełączać przeglądarki w GUI jak w starym filmie z Cypressa - choć npx playwright test --ui nadal pozwala wybierać projekt z listy.

Edge i Chrome kanałowe

Playwright potrafi uruchomić zainstalowany Edge (channel: 'msedge') lub Chrome (channel: 'chrome'). To osobny wariant use w projekcie - przydatne, gdy chcesz zweryfikować coś bliżej „prawdziwej” instalacji użytkownika.

Podsumowanie

Kod z epoki Cypress pod Conduit:

https://github.com/12masta/react-redux-realworld-example-app/tree/6-cypress

https://github.com/12masta/react-redux-realworld-example-app/pull/7/files

Następny odcinek: Wizualna regresja wbudowana w Playwright.