Тестирование с playwright. Начало

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

Содержание

• Проблемы Cypress
• Подготовка к работе с Playwright
  • Подготовка. Тестовый проект
  • Как добавить Playwright в новый проект
  • Установка браузеров
• Запуск тестов Playwright
  • Обычный запуск
  • Запуск в режиме UI
  • Запуск в режиме отладки
• Генератор кода тестов
• Промежуточные выводы
• Что дальше

Проблемы Cypress

Основные нарекания в адрес Cypress были следующие:

• отсутствие из коробки возможности запуска тестов в многопоточном режиме
• медленное выполнение тестов
• проблемы с работой компонентных тестов в CI

На протяжении ряда статей мы разберем эти и другие проблемы. А также попробуем понять решатся ли они с Playwright.

Подготовка к работе с Playwright

Подготовка. Тестовый проект

Чтобы было на чем пробовать найдем на GitHub небольшой проект на Vue с примерами тестов на Playwright. В процессе изучения будем его немного модифицировать.

Обращаю внимание на то, что в package.json указана версия node (на момент написания статьи — ^20.19.0 || >=22.12.0), на которой проект работает. Для работы с разными версиями node на одной машине (без docker) удобно использовать инструмент nvm, в котором упоминалось в одной из статей. Таким образом, работу с тестовым проектом лучше начать с команды:

nvm use 22.12

Далее все достаточно традиционно:

npm install
npm run dev

В итоге мы видим надпись с инструкцией по открытию приложения в браузере:

 npm run dev    

> test@0.0.0 dev
> vite


  VITE v7.1.9  ready in 773 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

После этих шагов мы видим работу тестового приложения в браузере по адресу localhost:5173. И теперь мы бы хотели запустить имеющиеся в проекте тесты Playwight.

Как добавить Playwright в новый проект

Если нам нужно добавить этот инструмент тестирования в новый проект, то это делается простой командой:

npm init playwright@latest

Установщик задаст несколько уточняющих вопросов и в папку приложения (в зависимости от ответов) будут добавлены следующие элементы:

playwright.config.ts         # Test configuration
tests/
  example.spec.ts            # Minimal example test
tests-examples/
  demo-todo-app.spec.ts      # Richer example tests

А также обновлены файлы package.json и package-lock.json

Установщик спросит какие браузеры установить для тестирования и выполнит эту работу.

Установка браузеров

В тестовом проекте для работы Playwright нам нужно установить браузеры отдельной командой:

npx playwright install

Playwright поддерживает Chromium, WebKit и Firefox на Windows, Linux и macOS. Локально или в CI, без интерфейса или с интерфейсом, с собственной мобильной эмуляцией для Chrome (Android) и Mobile Safari.

При запуске тестов, если не указать иного, то Playwright запустит тесты во всех браузерах, которые указаны в файле playwright.config.ts в секции projects.

Запуск тестов Playwright

Обычный запуск

Теперь, когда playwright и браузеры установлены можно использовать команду npx playwright test для запуска тестов. В рассматриваемом тестовом проекте команда test:e2e из секции scripts файла package.json делает то же самое:

npm run test:e2e

> test@0.0.0 test:e2e
> playwright test


Running 6 tests using 3 workers
  6 passed (5.9s)

To open last HTML report run:

  npx playwright show-report

Как можно видеть из вывода команды, мы можем посмотреть в браузере отчет по выполненным тестам. Для каждого теста можно получить список его проверок. Ниже, на Рисунке 1 — снимок экрана с общим отчетом по всем выполненным тестам. На Рисунке 2 — отчет по отдельным проверкам первого теста.

На снимках экрана видно, что каждый из тестов был выполнен во всех указанных в проекте браузерах.

Запуск в режиме UI

Кроме обычного запуска тестов, который выполнится в консоли, можно запускать тесты в режиме с графическим интерфейсом. Для этого служит опция --ui команды playwright test. То есть команда принимает вид npx playwright test --ui. В итоге откроется окно с различными секциями.

На Рисунке 3 показан вид данного окна. Сверху — шакала времени. Слева — дерево с тестами. В центральной части — текущий вид страницы приложения, который соответствует выбранному моменту во вкладке Actions. Ниже этого расположен еще ряд вкладок, в которых можно увидеть исходный код, логи, сетевые запросы и многое другое. Вы можете найти нужное место теста и посмотреть, что происходило в этот момент, до него и после.

Запуск в режиме отладки

Конечно же тесты, как и любой другой код, могут потребовать пошаговой отладки. Для этих целей есть опция --debug. Но если мы просто выполним npx playwright test --debug, то во-первых запустится отладка всех тестов по очереди. А во-вторых запуск будет происходить в каждом браузере из наших настроек последовательно. Это, вероятно, не то, что мы хотим. Поэтому лучше указать какой именно тест мы хотим отлаживать и ограничиться одним браузером. Давайте запустим в режиме отладки второй тест из набора в браузере Firefox. Используем следующую команду:

npx playwright test -g "should navigate to other pages" --debug --project firefox

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

На Рисунке 4 вы можете видеть результат выполнения команды. Запустилось два окна: браузер с открытым приложением (Рисунок 5) и Playwright Inspector (Рисунок 6). Во втором окне виден исходный код теста и кнопки для пошагового выполнения теста.

Генератор кода тестов

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

npx playwright codegen http://localhost:5173/login

Аргумент в виде адреса к странице будет использован для того, чтобы с ее открытия начать тест. Эта команда запустит браузер со специальной панелью кнопок. Все действия, которые вы будите совершать (клики, набор текста в полях и т.п.) будут преобразованы в код. Для привязки действий генератор выберет наиболее подходящие, на его взгляд, селекторы (локаторы).

Промежуточные выводы

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

Что дальше

В следующей статье разберем настройку CI в Gitlab в обычном режиме и в режиме с несколькими потоками.