Cypress vs Playwright: порівняння у 2026 році

describe('Auth', () => {
  it('logs in successfully', () => {
    cy.visit('/auth/login')
 
    cy.get('[data-cy=email]')
      .type('user@test.com')
 
    cy.get('[data-cy=password]')
      .type('pass123')
 
    cy.get('[data-cy=submit]')
      .click()
 
    cy.url()
      .should('include', '/dashboard')
 
    cy.contains('Welcome, User')
      .should('be.visible')
  })
})

import { test, expect } from '@playwright/test'
 
test('logs in successfully', async ({ page }) => {
  await page.goto('/auth/login')
 
  await page.getByLabel('Email')
    .fill('user@test.com')
 
  await page.getByLabel('Password')
    .fill('pass123')
 
  await page.getByRole('button', { name: 'Login' })
    .click()
 
  await expect(page)
    .toHaveURL(/dashboard/)
 
  await expect(page.getByText('Welcome, User'))
    .toBeVisible()
})

cy.get('#submit-btn')              // ID
cy.get('.product-card')            // клас
cy.get('[data-cy="email-input"]')  // data-атрибут (рекомендовано)
cy.contains('Submit')              // текст
cy.contains('h2', 'Dashboard')     // тег + текст
 
// В межах контейнера
cy.get('.cart').within(() => {
  cy.contains('Total')
  cy.get('.price').should('exist')
})

page.getByRole('button', { name: 'Submit' }) // роль
page.getByLabel('Email address')             // label
page.getByPlaceholder('Search...')           // placeholder
page.getByText('Total: $150')               // текст
page.getByTestId('email-input')             // data-testid
 
// Вкладені і фільтровані
page.locator('.cart')
  .getByRole('button', { name: 'Remove' })
page.getByRole('listitem')
  .filter({ hasText: 'In stock' })

// Playwright — запуск в 4 браузерах одночасно
projects: [
  { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
  { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  { name: 'mobile',   use: { ...devices['iPhone 14'] } },
]

cy.request({
  method: 'POST',
  url: '/api/login',
  body: { email: 'user@test.com', password: 'pass123' }
}).then(resp => {
  expect(resp.status).to.eq(200)
  expect(resp.body).to.have.property('token')
})
 
// Обхід UI через API (популярна практика)
cy.request('POST', '/api/login', creds)
  .its('body.token')
  .then(token => cy.setCookie('auth_token', token))

// API і UI в одному проєкті
test('combined test', async ({ page, request }) => {
  const { token } = await (await request.post('/api/login', {
    data: { email: 'user@test.com', password: 'pass123' }
  })).json()
 
  await page.goto('/dashboard')
  await page.evaluate(t =>
    localStorage.setItem('token', t), token)
})

# Між файлами — безкоштовно
cypress run --parallel
 
# Всередині файлу — завжди послідовно
# Sharding між CI машинами — потрібен Cypress Cloud ($75+/міс)

// playwright.config.ts
export default defineConfig({
  fullyParallel: true,  // кожен тест в окремому worker
  workers: process.env.CI ? 2 : 4,
})
 
// Sharding вбудований — без платних сервісів
// npx playwright test --shard=1/3
// npx playwright test --shard=2/3
// npx playwright test --shard=3/3

// ❌ Нові вкладки — неможливо нативно
// window.open() блокується
 
// ❌ Cross-origin iframe
// cy.get('#payment-iframe')  // не можна перейти всередину
 
// ❌ Кілька вкладок
// Неможливо тестувати "відкрити в новій вкладці"
 
// ✅ Workaround для iframe (тільки same-origin)
cy.get('#iframe').then($iframe => {
  cy.wrap($iframe.contents().find('body'))
    .find('#card-number').type('4242...')
})

// ✅ Нові вкладки
const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.getByText('Open in new tab').click()
])
 
// ✅ Cross-origin iframe
const frame = page.frameLocator('#payment-iframe')
await frame.getByLabel('Card number').fill('4242...')
 
// ✅ Popup windows
const [popup] = await Promise.all([
  page.waitForEvent('popup'),
  page.getByText('Open popup').click()
])
await popup.waitForLoadState()