Playwright — это мощный инструмент для автоматизации браузеров, который поддерживает множество функций, включая тестирование различных браузеров (Chromium, Firefox, WebKit), параллельное выполнение тестов и взаимодействие с веб-страницами. Для интеграции с CI/CD пайплайнами Playwright предоставляет простоту настройки, гибкость и возможность автоматизации тестирования на различных этапах разработки. В этой статье рассмотрим настройку CI пайплайнов для Playwright с использованием популярных CI-систем.
Процесс интеграции Playwright в CI-систему включает несколько ключевых этапов:
Перед началом работы с CI пайплайнами необходимо установить Playwright и его зависимости. Это стандартный процесс для Node.js-проектов:
npm install playwrightДля того чтобы протестировать приложение в разных браузерах, необходимо установить дополнительные зависимости для каждого из браузеров:
npx playwright installЭто установит нужные браузеры для выполнения тестов: Chromium,
Firefox и WebKit. Для CI-окружения рекомендуется использовать команду
npx playwright install --with-deps, которая установит все
необходимые библиотеки и зависимости, включая системные пакеты, которые
могут быть необходимы для работы Playwright в CI.
GitHub Actions — популярный инструмент для автоматизации процессов CI/CD, интегрированный в GitHub. Рассмотрим, как настроить GitHub Actions для выполнения тестов с Playwright.
.github/workflows и файл,
например, playwright.yml. В этом файле описываются шаги для
запуска тестов.Пример конфигурации для GitHub Actions:
name: Playwright Tests
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '16'
- name: Install dependencies
run: |
npm ci
- name: Install Playwright browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: npm testВ этом примере GitHub Actions будет запускать тесты на Ubuntu,
проверяя код при каждом push или pull request в ветку main.
Важный момент — перед запуском тестов устанавливаются все зависимости, а
также браузеры, необходимые для работы Playwright.
GitLab CI/CD позволяет настраивать пайплайны с использованием
.gitlab-ci.yml. Вот пример конфигурации для запуска тестов
Playwright в GitLab:
stages:
- test
test:
image: mcr.microsoft.com/playwright:v1.20.0-focal
stage: test
script:
- npm ci
- npx playwright install --with-deps
- npm testВ этом случае используется Docker-образ playwright,
который содержит все необходимые компоненты для тестирования. GitLab CI
автоматически установит Playwright и браузеры, а затем выполнит тесты.
Этот подход значительно упрощает настройку, так как не требуется
устанавливать Playwright вручную или конфигурировать отдельные
образы.
CircleCI — ещё один популярный сервис для CI/CD, который позволяет
настраивать пайплайны с использованием конфигурации в файле
.circleci/config.yml.
Пример конфигурации для CircleCI:
version: 2.1
executors:
node-executor:
docker:
- image: circleci/python:3.8
working_directory: ~/repo
jobs:
test:
executor: node-executor
steps:
- checkout
- run:
name: Install Node.js
command: |
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
- run:
name: Install dependencies
command: npm ci
- run:
name: Install Playwright browsers
command: npx playwright install --with-deps
- run:
name: Run Playwright tests
command: npm test
workflows:
version: 2
test:
jobs:
- testЗдесь используется образ Docker с установленным Python, так как CircleCI по умолчанию использует различные образы для разных языков. Сначала устанавливается Node.js, затем устанавливаются зависимости проекта и Playwright. После этого выполняются тесты.
Playwright поддерживает запуск тестов в нескольких браузерах и параллельное выполнение тестов для ускорения процесса. Для CI-окружений это особенно важно, чтобы уменьшить время, необходимое для выполнения всех тестов.
Для параллельного выполнения тестов можно использовать
test.parallel:
import { test } from '@playwright/test';
test.describe('My tests', () => {
test('Test 1', async ({ page }) => {
await page.goto('https://example.com');
});
test('Test 2', async ({ page }) => {
await page.goto('https://example.com/about');
});
});Для настройки параллельного выполнения в CI пайплайне можно
использовать опцию parallel в конфигурации Playwright.
Например:
- name: Run Playwright tests
run: npx playwright test --workers=4Этот пример запускает тесты с четырьмя параллельными процессами. Таким образом, можно значительно ускорить время выполнения всех тестов, что особенно важно при большом количестве тестов или сложных веб-приложениях.
После выполнения тестов важно не только получить результат, но и сгенерировать отчёт, который можно будет проанализировать. Playwright поддерживает интеграцию с различными инструментами для генерации отчётов.
Один из вариантов — использование JUnit отчётов:
npx playwright test --reporter=junitВ CI-системах, таких как GitHub Actions или GitLab, можно настраивать автоматическую загрузку отчётов в систему мониторинга или уведомления о статусе тестов.
Настройка CI пайплайнов для Playwright требует корректной установки зависимостей, а также правильной конфигурации пайплайнов в зависимости от выбранной CI-системы. Использование параллельного выполнения тестов и интеграция с отчётностью помогают эффективно управлять тестированием и ускорить процесс проверки качества кода.