Wizualna regresja z Playwright

Wstęp

Wpis o Cypressie opierał się na cypress-image-snapshot. W Playwright porównanie obrazów jest w rdzeniu: expect(locator).toHaveScreenshot() / expect(page).toHaveScreenshot().

Poprzedni odcinek: Wiele przeglądarek.

Pierwszy baseline

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

test("ekran po zalogowaniu", async ({ page, request }) => {
  // ... seed + login jak w wcześniejszych częściach
  await page.goto("/login")
  // ...
  await expect(page).toHaveScreenshot({ fullPage: true })
})

Pierwsze uruchomienie zapisuje plik referencyjny obok spec (domyślnie *-snapshots/). Kolejne porównują piksel po pikselu; przy różnicy test pada i zostawia artefakty (test-results/).

Element zamiast całej strony

await expect(page.getByTestId("sign-in-button")).toHaveScreenshot()

Przydatne, gdy reszta layoutu jest zbyt dynamiczna (animacje, reklamy).

Aktualizacja wzorców

Po zamierzonej zmianie UI:

npx playwright test --update-snapshots

Odpowiednik updateSnapshots z Cypressa - commit nowych PNG świadomie, tak jak robiłeś z cypress/snapshots.

Progi i stabilność

Często ustawisz:

await expect(page).toHaveScreenshot({ maxDiffPixels: 100 })

albo globalnie w expect w playwright.config.ts (toHaveScreenshot threshold). To ogranicza flaky diffy od fontów antyaliasingu między agentami CI.

Ilustracje z tamtej serii

Efekt „wyłapania” pojedynczej zmiany w tekście nadal dobrze pokazują zrzuty z cypress-7 - mechanizm jest ten sam, tylko API inne.

Przykładowy diff z epoki Cypress

Kod na GitHubie (Cypress / historyczny)

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

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

Następny odcinek: Playwright w CI na Azure DevOps.