Мы рассмотрим причины перехода с 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 и поделились своим опытом в статьях в блогах. Вот несколько примеров:
- https://mtlynch.io/notes/cypress-vs-playwright/
- https://www.21risk.com/blog/migration-from-cypress-to-playwright-hype-or-great
В этих статьях содержится ценная информация о процессе миграции, возникающих проблемах и преимуществах использования Playwright для комплексного тестирования.
Заключение
Миграция с Cypress на Playwright может значительно улучшить процесс сквозного тестирования, предлагая лучший опыт разработчиков, более быстрое выполнение тестов и повышенную стабильность тестов. Следуя практическим шагам, описанным в этом руководстве, и изучая опыт других групп разработчиков, вы сможете успешно перенести свою среду тестирования на Playwright и воспользоваться преимуществами этого мощного инструмента тестирования.
Не забудьте попробовать наш инструмент миграции Cypress to Playwright и следите за обновлениями и новыми функциями проекта Playwright, которые будут продолжать улучшать ваш опыт сквозного тестирования.