«Remove .only from Cypress test» — знаком ли вам такой комментарий к коммиту? Если вы используете Cypress для сквозного тестирования, то вы знаете, о чем я говорю.

Мы создали обширный набор из более чем 200 тест-кейсов с помощью Cypress. Хотя Cypress является мощным инструментом, мы в какой-то момент заинтересовались Playwright. Playwright — это быстро развивающийся фреймворк с открытым исходным кодом, разработанный Microsoft. Обещания повысить скорость, унифицировать синтаксис и обеспечить кроссбраузерную поддержку серьезно заинтересовали нас, и мы решили попробовать.

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

Мы также расскажем о том, с какими трудностями мы столкнулись на этом пути. Если вы подумываете о таком же переходе, это может помочь вам принять решение.

Почему мы перешли на Playwright

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

1) Скорость

Playwright значительно быстрее Cypress. Набор тестов Playwright работает в 3 раза быстрее, чем аналог Cypress на локальной машине разработчиков. В GitHub CI Playwright работает в 2 раза быстрее Cypress.

┌────────────────────────┬──────────┬────────────┬────────────┐
│ Task │ Cypress │ Playwright │ Difference │
├────────────────────────┼──────────┼────────────┼────────────┤
│ Run tests locally │ 1min 27s │ 25s │ -72% │
│ Run tests on GitHub CI │ 6min 38s │ 3min 43s │ -44% │
└────────────────────────┴──────────┴────────────┴────────────┘

2) Параллелизм и шардинг

Увеличение скорости уже привело нас в восторг. Но в чем причина такого ускорения?

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

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

// playwright.config.ts
import { defineConfig } from '@playwright/test';


export default defineConfig({
 fullyParallel: true,
 retries: process.env.CI ? 3 : 0,
 workers: process.env.CI ? 1 : undefined,
});

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

npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3

3) Унифицированный синтаксис

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

Поэтому написание тестов на Cypress всегда требовало использования другой ментальной модели. При написании тестов мы часто сталкивались с тем, что путали утверждения типа .toBeVisible и .should('be.visible').

Любой JavaScript разработчик посчитает тест Playwright довольно простым для понимания. Он включает в себя использование async функций, ожидание обещаний и присвоение значений возвращаемых (return) функций переменным.

test('Lingvano logo is visible', async ({page}) => {
    await page.goto('/home');

    const logo = page.getByTestId('lingvano-logo');
    await expect(logo).toBeVisible();

    await logo.click();

    await expect(logo).not.toBeVisible();
  });

4) Опыт разработки

Если вы используете Cypress, то знаете, как происходит тестирование: вы открываете окно Cypress через терминал, ищете свою спеку и запускаете соответствующий тест. О, на самом деле вы хотели запустить только один конкретный тест? Тогда вы возвращаетесь в редактор кода, отмечаете тест как .only и возвращаетесь в окно Cypress. Это может иногда раздражать.

Когда речь заходит об удобстве для разработчиков, Playwright значительно меняет ситуацию.

Прежде всего, расширение Playwright для VSCode плавно интегрируется с редактором кода. Вы можете запускать целые потоки или отдельные тест-кейсы одним щелчком мыши, не выходя из редактора. IDE Intellij поддерживает Playwright нативно в версии EAP уже сейчас.

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

>> Расширение Playwright VSCode (GIF, открывается с VPN)

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

В нем можно просматривать трейсы, передвигаться по времени выполнения тестов и запускать тесты в режиме просмотра. Если вы работаете с тестами, как мы, то режим просмотра будет очень полезен во время разработки.

Более того, режим UI позволяет выбирать локаторы прямо из снимка состояния DOM и просматривать записи о сетевой активности.


UI режим Playwright

5) Поддержка кросс-браузерности

Еще одна причина, которая нас привлеклав Playwright — это поддержка кроссбраузерности. В то время как Cypress в настоящее время поддерживает браузеры семейства Firefox и Chrome (включая Edge и Electron), у него есть только экспериментальная поддержка WebKit, который является браузерным движком Safari.

Playwright поддерживает Chromium, Firefox, и браузеры на базе WebKit, такие как Safari, а также Edge. Как и Cypress, он позволяет запускать тесты как в режиме headed, так и в режиме headless.

Перенос 200+ тестов из Cypress

Мы были уверены в Playwright и готовы перенести набор тестов нашего приложения React Native. Но как наиболее эффективно перенести 200+ тестов, спросите вы?

Изначально мы рассчитывали на GPT4 для переписывания тестов из Cypress в Playwright. Мы показали GPT4 несколько примеров и попросили его переписать тест-кейсы на их основе.

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

Затем мы переключились на GitHub Copilot.

1. Скопируйте тест-кейс Cypress.
2. Начните вводить тест-кейс Playwright.
3. Позвольте Copilot завершить работу над тест-кейсом.

Использование здесь GitHub Copilot оказалось довольно эффективно и надежно.

Playwright также предлагает инструмент миграции, который поможет вам перейти на новый уровень. Также можно найти другие инструменты для поддержки миграции, например — Cypress to Playwright converter, разработанный QA-инженером.

В конечном счете, для завершения миграции нам потребовалось около двух недель.

Проблемы, с которыми вы можете столкнуться

По большей части миграция прошла гладко. Однако, как и при любом переходе на новый фреймворк, мы столкнулись с несколькими трудностями на этом пути.

1) Непредсказуемость WebKit

В то время как запуск тестов на WebKit отлично работает локально на Mac, в нашем GitHub CI пайплайне он был довольно медленным и нестабильным.

2) Интеграция MSW и Playwright

Мы используем MSW для мокинга API-запросов при разработке и автоматическом тестировании.

На данный момент Playwright не полностью интегрирован с MSW. В Playwright отсутствует поддержка MSW в контексте окна, что затрудняет перезапись MSW-обработчиков. Playwright рекомендует использовать встроенный в него сетевой мокинг, а не полагаться на сторонние библиотеки.

Подведение итогов

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

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

Не стесняйтесь заглянуть в наши публичные репозитории и другие проекты, где мы делимся некоторыми деталями технической настройки и инфраструктуры нашего приложения React Native Expo для веб, iOS и Android.

Все актуальные инструменты и техники для проведения эффективного тестирования можно изучить на онлайн-курсах OTUS под руководством экспертов IT-индустрии.