5 причин почему Playwright лучше Cypress

Перевод статьи Alister Scott: Five reasons why Playwright is better than Cypress

Очевидно, что я не фанат Cypress, о чем, собственно, 2 года назад написал пост. За это время мое внимание привлек Playwright. Я специально вернулся к Cypress, чтобы сравнить его с Playwright и посмотреть, были ли исправлены претензии по отношению к первому фреймворку. На основании проведенного сравнения, могу смело рассказать о причинах, почему Cypress все еще проигрывает конкуренцию.

Сравниваемые версии:
Cypress: 8.7.0 on Electron 93
Playwright: 1.16.0

Причина 1: Playwright быстрее чем Cypress

Зафиксированный результат — до 4-х раз быстрее!
Берем простой пример из документации Cypress:

describe('My First Test', () => {
    it('clicking "type" shows the right headings', () => {
      cy.visit('https://example.cypress.io')
      cy.contains('type').click()
      // Should be on a new URL which includes '/commands/actions'
      cy.url().should('include', '/commands/actions')
      // Get an input, type into it and verify that the value has been updated
      cy.get('.action-email')
        .type('fake@email.com')
        .should('have.value', 'fake@email.com')
    })
})

Работает 8 секунд на моем M1 Macbook Air

✔  demo-spec.js                             
00:08

Тот же пример на Playwright:

import { test, expect } from '@playwright/test'
 
test.describe.parallel('My First Test', () => {
  test('clicking "type" shows the right headings', async ({ page }) => {
    await page.goto('https://example.cypress.io')
    await page.click('a:has-text("type")')
    // Should be on a new URL which includes '/commands/actions'
    await page.waitForURL(/.+\/commands\/actions$/)
    // Get an input, type into it and verify that the value has been updated
    await page.fill('.action-email', 'fake@email.com')
    await expect(page.locator('.action-email')).toHaveValue('fake@email.com')
  })
})

Running 1 test using 1 worker
  ✓  scenarios/compare.cypress.spec.ts:4:3 › My First Test › clicking "type" shows the right headings (1s)
  1 passed (2s)

В 4 раза быстрее!