Cypress vs Playwright – który wybrać do projektu Next.js?

Pytanie brzmi: który z nich lepiej pasuje do projektu opartego na Next.js?

Szybkie porównanie

Krótka historia obu narzędzi

Cypress pojawił się w 2017 roku i bardzo szybko stał się standardem w świecie frontendowym, a jego największą zaletą było rewolucyjne podejście do debugowania testów – time travel, automatyczne snapshoty i interaktywny runner.

Playwright to nieco świeższy projekt z 2020 roku, stworzony przez Microsoft, a konkretnie przez byłych twórców Puppeteera. Od początku swojego istnienia stawiał na wieloprzeglądarkowe wsparcie i szybkość działania.

Developer Experience (DX)

Cypress

Cypress słynie z fenomenalnego DX, ponieważ interaktywny Test Runner pozwala obserwować testy w czasie rzeczywistym, klikać w poszczególne kroki i widzieć stan DOM w danym momencie. To wygodne i jednocześnie bardzo ułatwia "wejście" do testowania dla nowych, uczących się użytkowników.

// cypress/e2e/homepage.cy.ts
describe('Homepage', () => {
  it('should display hero section', () => {
    cy.visit('/')
    cy.get("[data-testid='hero-title']").should('be.visible')
    cy.get("[data-testid='cta-button']").click()
    cy.url().should('include', '/signup')
  })
})

Składnia oparta na chainingu jest prosta i intuicyjna, choć wymaga zrozumienia asynchronicznej natury komend Cypress – nie są to zwykłe Promise'y.

Playwright

Playwright oferuje natywne wsparcie dla async/await, co jest bardziej naturalne dla developerów znających JavaScript/TypeScript.

// tests/homepage.spec.ts
import { test, expect } from '@playwright/test'
 
test('should display hero section', async ({ page }) => {
  await page.goto('/')
  await expect(page.getByTestId('hero-title')).toBeVisible()
  await page.getByTestId('cta-button').click()
  await expect(page).toHaveURL(/signup/)
})

Warto też dodać, że Playwright ma wbudowany codegen – narzędzie nagrywające interakcje w przeglądarce i generujące gotowy kod testów.

Szybkość wykonywania testów

To tutaj Playwright zdecydowanie wygrywa, a kluczowe różnice to:

• Playwright uruchamia testy równolegle i to domyślnie (worker-based parallelism),
• Cypress domyślnie uruchamia testy sekwencyjnie (paralelizacja wymaga Cypress Cloud lub zewnętrznych narzędzi),
• Playwright używa kontekstów przeglądarki, które są znacznie lżejsze niż pełne instancje,
• Cypress wymaga osobnej instancji przeglądarki dla każdego spec file.

W praktyce różnice w CI najczęściej wyglądają tak:

Oczywiście to nie jest neutralny benchmark laboratoryjny dla każdej aplikacji, tylko mocno uogólniony obraz.

Wsparcie dla Next.js

Server-Side Rendering (SSR)

Oba narzędzia radzą sobie z SSR, ale Playwright lepiej obsługuje scenariusze wymagające interceptowania requestów na poziomie serwera.

// Playwright - interceptowanie SSR response
test('SSR page should contain meta tags', async ({ page }) => {
  const response = await page.goto('/blog/my-post')
  const html = await response?.text()
  expect(html).toContain('<meta property="og:title"')
})

App Router i Server Components

Next.js App Router z React Server Components wprowadza dodatkowe wyzwania. Nie chodzi o to, że Cypress "nie umie" testować SSR. Chodzi raczej o to, że Playwright daje bardziej naturalny model do testowania pełnego flow przeglądarkowego, wielu browserów, trace'ów z CI i zachowania aplikacji bliższego produkcji.

Next.js + Playwright – oficjalne wsparcie

Next.js ma oficjalną dokumentację i przykłady dla Playwright, ale nie zakładaj, że każda nowa aplikacja z create-next-app od razu wygeneruje Ci kompletny playwright.config.ts. W praktyce i tak warto świadomie ustawić webServer, baseURL i tryb uruchamiania testów pod lokalny dev oraz CI.

// playwright.config.ts
import { defineConfig } from '@playwright/test'
 
export default defineConfig({
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
  use: {
    baseURL: 'http://localhost:3000',
  },
})

Component Testing

Cypress Component Testing

Cypress oferuje dedykowany Component Testing runner, który renderuje komponenty React w izolacji i robi to bez uruchamiania pełnej aplikacji.

// cypress/component/Button.cy.tsx
import { Button } from "@/components/Button";
 
describe("Button", () => {
  it("should call onClick handler", () => {
    const onClick = cy.stub().as("clickHandler");
    cy.mount(<Button onClick={onClick}>Click me</Button>);
    cy.get("button").click();
    cy.get("@clickHandler").should("have.been.calledOnce");
  });
});

Playwright Component Testing (experimental)

Playwright również oferuje component testing, ale nadal jest mniej dojrzały niż odpowiednik Cypressa. Jeśli component testing ma być centralnym elementem Twojego workflow, Cypress nadal ma tu przewagę.

Wsparcie przeglądarek

Brak wsparcia Safari w Cypress to istotny minus, jeśli Twoi użytkownicy korzystają z urządzeń Apple.

CI/CD i raportowanie

Cypress

• Open-source runner jest darmowy,
• Cypress Cloud jest opcjonalne, ale płatne i bardzo przydatne przy paralelizacji, nagraniach i analytics,
• Dashboard z historią testów,
• Łatwa konfiguracja z GitHub Actions.

Playwright

• Wbudowane raportowanie HTML,
• Trace Viewer – interaktywne debugowanie nieudanych testów z CI,
• Natywna paralelizacja bez dodatkowych usług,
• Darmowy na każdym CI.

# .github/workflows/e2e.yml - Playwright
- name: Run Playwright tests
  run: npx playwright test
- uses: actions/upload-artifact@v4
  if: always()
  with:
    name: playwright-report
    path: playwright-report/

Kiedy wybrać Cypress?

• Twój zespół ceni najlepszy Developer Experience i interaktywne debugowanie,
• Potrzebujesz Component Testing w stabilnej wersji,
• Projekty, w których testujecie głównie jedną przeglądarkę (Chrome),
• Masz już zespół obeznany z komendami Cypress i nie chcesz komplikować workflow,
• Masz budżet na Cypress Cloud albo nie potrzebujesz wykorzystywać agresywnej paralelizacji w CI.

Kiedy wybrać Playwright?

• Potrzebujesz testów na wielu przeglądarkach (w tym Safari, którego Cypress nie wspiera),
• Szybkość CI jest priorytetem (Playwright ma natywną paralelizację),
• Pracujesz z Next.js App Router i chcesz mocniej testować zachowanie zbliżone do produkcji,
• Interesuje Cię darmowe rozwiązanie end-to-end,
• Preferujesz natywne async/await.

Moja rekomendacja dla Next.js w 2026

Dla nowych projektów Next.js w 2026 roku Playwright jest zwykle bezpieczniejszym wyborem, ponieważ ma oficjalną ścieżkę w dokumentacji Next.js, szerokie wsparcie dla przeglądarek, natywną paralelizację i darmowy Trace Viewer. To mocny zestaw argumentów przemawiających za Playwright.

Cypress wciąż ma sens, jeśli Twój zespół go zna, cenicie jego interaktywny runner albo component testing jest dla Was naprawdę ważny. Dobierajcie framework do zespołu i produktu, nie zwracajcie uwagi na modę.