Playwright vs Cypress в 2026: E2E-тестирование фронтенда — что выбрать

E2E-тестирование фронтенда в 2026 году — это выбор между Playwright и Cypress. Оба инструмента зрелые, оба активно развиваются, но архитектурно они принципиально разные. Разбираемся в отличиях, сравниваем API, скорость и определяем, когда какой инструмент лучше подходит.

Архитектура: два подхода к автоматизации

Playwright управляет браузерами извне через CDP (Chrome DevTools Protocol) и аналогичные протоколы для Firefox и WebKit. Тест и браузер — отдельные процессы. Это даёт:

• Поддержку Chromium, Firefox, WebKit (Safari) из коробки.
• Мульти-табы, мульти-контексты, мульти-origins в одном тесте.
• Перехват сети, эмуляцию устройств, геолокацию.

Cypress работает внутри браузера — тестовый код в том же event loop, что и приложение. Даёт прямой доступ к DOM, time-travel debugging и автоматический retry. Но ограничивает: один таб, один origin, исторически только Chrome (Firefox/WebKit — экспериментально).

API: locators vs cy.get

Один и тот же тест на обоих фреймворках:

// Playwright
import { test, expect } from '@playwright/test';

test('добавление товара в корзину', async ({ page }) => {
  await page.goto('/products');

  // Locator — автоматический retry + strict mode
  await page.getByRole('button', { name: 'Добавить' }).first().click();

  // Web-first assertion — ждёт пока условие выполнится
  await expect(page.getByTestId('cart-count')).toHaveText('1');

  // Навигация
  await page.getByRole('link', { name: 'Корзина' }).click();
  await expect(page).toHaveURL('/cart');
  await expect(page.getByRole('heading')).toContainText('Корзина');
});

// Cypress
describe('Корзина', () => {
  it('добавление товара', () => {
    cy.visit('/products');

    // Цепочка команд — каждая ждёт предыдущую
    cy.contains('button', 'Добавить').first().click();

    cy.getByTestId('cart-count').should('have.text', '1');

    cy.contains('a', 'Корзина').click();
    cy.url().should('include', '/cart');
    cy.get('h1').should('contain', 'Корзина');
  });
});

Ключевые отличия API:

• Playwright — async/await, стандартный TypeScript. Locators ленивые, разрешаются в момент действия.
• Cypress — цепочки команд (chaining), свой event loop. Нельзя использовать async/await напрямую.
• Fixtures (Playwright) — DI для тестов: page, context, browser, кастомные фикстуры. Изоляция из коробки.
• Commands (Cypress) — кастомные команды через Cypress.Commands.add(). Глобальные, без типизации по умолчанию.

Параллелизация и скорость

Playwright:

• Параллелизация из коробки — воркеры по количеству CPU.
• Sharding для CI: npx playwright test --shard=1/4 — разбивает тесты между CI-джобами.
• Каждый тест в изолированном browser context — нет утечек состояния.

Cypress:

• Параллелизация — только через Cypress Cloud (платный) или сторонние решения (sorry-cypress).
• Spec-level параллелизм: каждый файл — отдельный процесс.
• Без Cloud нужно вручную разбивать тесты между CI-джобами.

// playwright.config.ts — параллелизация
import { defineConfig } from '@playwright/test';

export default defineConfig({
  workers: process.env.CI ? 4 : undefined,
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  reporter: [['html'], ['github']],
  use: {
    trace: 'on-first-retry', // трейс только при падении
  },
});

На практике Playwright быстрее в CI: 200 тестов за 2-3 минуты с 4 воркерами vs 8-12 минут в Cypress без параллелизации.

Component testing

Playwright CT — экспериментальный, монтирует компоненты в реальном браузере:

// Button.spec.tsx (Playwright CT)
import { test, expect } from '@playwright/experimental-ct-react';
import { Button } from './Button';

test('рендерит текст', async ({ mount }) => {
  const component = await mount(<Button label="Click me" />);
  await expect(component).toContainText('Click me');
});

test('вызывает onClick', async ({ mount }) => {
  let clicked = false;
  const component = await mount(
    <Button label="Click" onClick={() => clicked = true} />
  );
  await component.click();
  expect(clicked).toBe(true);
});

Cypress CT — более зрелый, поддерживает React, Vue, Angular, Svelte. Тот же API что и E2E — легко переключаться.

Для component testing многие предпочитают Vitest + Testing Library — быстрее для юнит-уровня.

Когда что выбрать

Playwright — если:

• Нужна кросс-браузерность (Safari/Firefox критичны).
• Большой тест-сьют — параллелизация из коробки.
• Команда пишет на TypeScript и привыкла к async/await.
• Нужны мульти-табы, iframes, cross-origin сценарии.

Cypress — если:

• Маленькая команда, нужен быстрый старт и отличный DX.
• Time-travel debugging критичен для отладки flaky-тестов.
• Уже есть Cypress-инфраструктура и кастомные команды.
• Тестируете преимущественно в Chrome.

Вывод

В 2026 году Playwright — выбор по умолчанию для новых проектов: бесплатная параллелизация, три браузера, мощный API. Cypress силён в DX и debugging, но платная параллелизация сужает нишу. Начинаете с нуля — берите Playwright. Есть работающий Cypress-сьют — мигрируйте только при реальных проблемах.