Мы рассмотрим причины перехода с Cypress на Playwright, преимущества использования Playwright и практические шаги по успешному переходу вашей среды сквозного тестирования.

Прежде чем углубляться в статью, проверьте наш инструмент Cypress to Playwright. Это поможет вам перенести тесты в несколько кликов.

Зачем переходить с Cypress на Playwright

Кипарис был популярным выбором для сквозного тестирования в последние годы. Однако многие QA-инженеры столкнулись с проблемами и ограничениями Cypress, что заставило их рассмотреть альтернативы, такие как Playwright. Давайте обсудим некоторые основные причины перехода с Cypress на Playwright.

Ненадежность в кипарисовых тестах

Одной из основных проблем Cypress является ненадежность тестов, особенно в конвейерах CI/CD. Это часто приводит к тому, что больше времени тратится на отладку тестового кода, чем на выпуск релизов, что не идеально подходит для быстро меняющихся групп разработчиков.

Опыт разработчиков с Cypress

Cypress имеет уникальный шаблон цепочки для команд, который может разочаровать разработчиков. Отсутствие поддержки async/await и несовместимые API могут сделать написание тестов в Cypress более сложным, чем это необходимо. Кроме того, запуск функций Node.js или пользовательских команд в Cypress требует сложного обучения и может быть подвержен ошибкам.

Производительность Cypress и распараллеливание

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

Преимущества использования драматурга

Playwright предлагает несколько преимуществ по сравнению с Cypress, что делает его привлекательным выбором для сквозного тестирования. Некоторые из ключевых преимуществ включают в себя:

Улучшенный опыт разработчиков

Playwright поддерживает async/await, обеспечивая более интуитивно понятный и современный подход к написанию тестов. API согласован и прост в использовании, что делает разработку тестов более быстрой и приятной.

Параллельное выполнение теста

Playwright активно продвигает параллельное выполнение тестов, позволяя запускать несколько тестов одновременно, как локально, так и в средах CI. Это может значительно ускорить время выполнения тестов и лучше использовать доступные ресурсы.

Лучшая стабильность теста и меньше нестабильности

Тесты, написанные в Playwright, как правило, более стабильны и менее склонны к нестабильности по сравнению с Cypress. Это приводит к более надежным результатам теста и меньшему количеству ложноположительных результатов.

Более быстрое выполнение теста

Тесты Playwright обычно выполняются быстрее, чем тесты Cypress, что приводит к более быстрой обратной связи и сокращению времени ожидания результатов теста.

Пример: эта команда продемонстрировала 3,87-кратное увеличение скорости выполнения тестов после перехода с Cypress на Playwright.

Поддержка нескольких браузеров

Playwright поддерживает тестирование в нескольких браузерах, включая Chrome, Firefox и Safari, обеспечивая лучшее тестовое покрытие в различных браузерных средах.

Миграция базового тестового примера

Прежде всего, давайте начнем перенос базового тестового примера с Cypress на @playwright/test. В этом разделе мы рассмотрим основы — настройку теста, переход на страницу, взаимодействие с элементами и создание утверждений.

Давайте рассмотрим следующий тестовый пример Cypress:

describe('Login Page', () => {
  it('should log in', () => {
    cy.visit('https://ray.run/login')
    cy.get('#username').type('admin')
    cy.get('#password').type('password123')
    cy.get('#login-button').click()
    cy.url().should('include', '/dashboard')
  })
})

Давайте перенесем это в @playwright/test:

import { test, expect } from '@playwright/test'
test('should log in', async ({ page }) => {
  await page.goto('https://ray.run/login')
  await page.fill('#username', 'admin')
  await page.fill('#password', 'password123')
  await page.click('#login-button')
  expect(await page.url()).toContain('/dashboard')
})

Обратите внимание, что в @playwright/test:

  • Мы используем await page.goto(URL) для перехода на страницу вместо cy.visit(URL).
  • Мы взаимодействуем с элементами, используя await page.fill(selector, value) и await page.click(selector) вместо cy.get(selector).type(value) и cy.get(selector).click().
  • Мы делаем утверждения, используя функцию expect вместо cy.should().

Отправка тестовой формы

Теперь предположим, что у нас есть контактная форма, которую нужно протестировать. Вот как может выглядеть тест Cypress:

describe('Contact Page', () => {
  it('should submit contact form', () => {
    cy.visit('https://ray.run/contact')
    cy.get('#name').type('John Doe')
    cy.get('#email').type('[email protected]')
    cy.get('#message').type('Hello there!')
    cy.get('#submit-button').click()
    cy.contains('Your message has been sent!')
  })
})

Вот как мы можем перенести его на @playwright/test:

import { test } from '@playwright/test'

test('should submit contact form', async ({ page }) => {
  await page.goto('https://ray.run/contact')
  await page.fill('#name', 'John Doe')
  await page.fill('#email', '[email protected]')
  await page.fill('#message', 'Hello there!')
  await page.click('#submit-button')
  expect(await page.textContent('body')).toContain('Your message has been sent
!')
})

Основное отличие здесь в том, что мы используем await page.textContent(selector) для проверки наличия определенного текста в содержимом страницы.

Работа с фикстурами и хуками

Как и Cypress, @playwright/test предоставляет хуки (beforeEach, afterEach и т. д.) и тестовые приспособления для настройки и удаления тестов.

Рассмотрим этот тест Cypress с креплениями и крючками:

describe('Dashboard Page', () => {
  beforeEach(() => {
    cy.visit('https://ray.run/login')
    cy.get('#username').type('admin')
    cy.get('#password').type('password123')
    cy.get('#login-button').click()
    cy.url().should('include', '/dashboard')
  })
  it('should display user profile', () => {
    cy.get('#profile-button').click()
    cy.contains('Admin User')
  })
  // Other tests...
})

Давайте перенесем это на @playwright/test:

import { test } from '@playwright/test'

test.beforeEach(async ({ page }) => {
  await page.goto('https://ray.run/login')
  await page.fill('#username', 'admin')
  await page.fill('#password', 'password123')
  await page.click('#login-button')
  expect(await page.url()).toContain('/dashboard')
})
test('should display user profile', async ({ page }) => {
  await page.click('#profile-button')
  expect(await page.textContent('body')).toContain('Admin User')
})
// Other tests...

Наглядное сравнение

Давайте рассмотрим некоторые из наиболее распространенных методов, которые вы можете использовать в Cypress, и то, как они переводятся в Playwright:

Посещение URL-адреса

В кипарисе:

cy.visit('https://ray.run/')

В драматурге:

await page.goto('https://ray.run/')

Щелчок по элементу

В кипарисе:

cy.get('#my-button').click()

В драматурге:

await page.click('#my-button')

Ввод в поле ввода

В кипарисе:

cy.get('#my-input').type('Some text')

В драматурге:

await page.fill('#my-input', 'Some text')

Проверка, содержит ли элемент определенный текст

В кипарисе:

cy.get('#my-element').should('contain', 'Expected text')

В драматурге:

expect(await page.textContent('#my-element')).toContain('Expected text')

Проверка URL-адреса страницы

В кипарисе:

cy.url().should('include', '/expected-path')

В драматурге:

expect(await page.url()).toContain('/expected-path')

Обработка предупреждений

В кипарисе:

cy.on('window:alert', (str) => {
  expect(str).to.equal('Expected alert text')
})

В драматурге:

page.on('dialog', async dialog => {
  expect(dialog.message()).toBe('Expected alert text')
  await dialog.dismiss()
})

Ожидание конкретного запроса

В кипарисе:

cy.intercept('GET', '/my-endpoint').as('myRequest')
cy.wait('@myRequest')

В драматурге:

await page.waitForRequest(request => request.url().includes('/my-endpoint') && request.method() === 'GET')

Ожидание отображения элемента

В кипарисе:

cy.get('#my-element').should('be.visible')

В драматурге:

await page.waitForSelector('#my-element', { state: 'visible' })

Создание скриншота

В кипарисе:

cy.screenshot()

В драматурге:

await page.screenshot()

Реальные примеры перехода с Cypress на Playwright

Несколько команд разработчиков успешно перешли с Cypress на Playwright и поделились своим опытом в статьях в блогах. Вот несколько примеров:

В этих статьях содержится ценная информация о процессе миграции, возникающих проблемах и преимуществах использования Playwright для комплексного тестирования.

Заключение

Миграция с Cypress на Playwright может значительно улучшить процесс сквозного тестирования, предлагая лучший опыт разработчиков, более быстрое выполнение тестов и повышенную стабильность тестов. Следуя практическим шагам, описанным в этом руководстве, и изучая опыт других групп разработчиков, вы сможете успешно перенести свою среду тестирования на Playwright и воспользоваться преимуществами этого мощного инструмента тестирования.

Не забудьте попробовать наш инструмент миграции Cypress to Playwright и следите за обновлениями и новыми функциями проекта Playwright, которые будут продолжать улучшать ваш опыт сквозного тестирования.