Введение в @playwright/test

Playwright — это инструмент для автоматизации браузерных тестов, разработанный компанией Microsoft. В отличие от других популярных фреймворков, таких как Selenium, Playwright поддерживает тестирование в нескольких браузерах, включая Chrome, Firefox и WebKit, что позволяет писать универсальные тесты, которые могут быть использованы для всех популярных браузеров.

Для начала работы с Playwright необходимо установить пакет @playwright/test. Этот пакет включает в себя фреймворк для тестирования, а также все необходимые инструменты для взаимодействия с браузером. Установка осуществляется через npm:

npm install -D @playwright/test

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

npx playwright install

Этот процесс скачает браузеры для тестирования. Playwright поддерживает тестирование в Chromium, Firefox и WebKit, и вам нужно будет указать, какие именно браузеры вы хотите использовать в процессе тестирования.

Создание первого теста

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

Пример простого теста:

import { test, expect } from '@playwright/test';

test('Тест на главную страницу', async ({ page }) => {
  await page.goto('https://example.com');
  const title = await page.title();
  expect(title).toBe('Example Domain');
});

В этом примере создается тест, который выполняет следующие шаги:

  1. Открывает страницу https://example.com.
  2. Получает заголовок страницы.
  3. Проверяет, что заголовок страницы соответствует ожидаемому значению.

Основные концепции Playwright

Страницы (Pages)

Playwright взаимодействует с браузером через страницы (pages). Каждая страница — это окно браузера, и с ней можно работать с помощью различных методов API. Страница позволяет взаимодействовать с DOM, заполнять формы, делать клики и так далее.

const page = await browser.newPage();
await page.goto('https://example.com');

Элементы страницы

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

const button = await page.$('button#submit');
await button.click();

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

Ожидания

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

Пример:

await page.waitForSelector('button#submit');

Здесь код ждет, пока элемент с селектором button#submit не станет доступен на странице.

Контексты (Contexts)

Контексты представляют собой изолированные экземпляры браузера. Каждый контекст может содержать несколько страниц, которые будут разделять состояние, куки и локальное хранилище. Контексты полезны при тестировании с несколькими пользователями или при необходимости изолировать тестовые данные.

const context = await browser.newContext();
const page = await context.newPage();

Асинхронность и управление временем

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

const page = await browser.newPage();
await page.goto('https://example.com');
await page.click('button#submit');

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

await page.waitForTimeout(1000); // Задержка на 1 секунду

Тестовые сценарии и фреймворк

Playwright тесно интегрирован с фреймворком для тестирования, что позволяет создавать тестовые сценарии, которые могут быть выполнены через командную строку или CI/CD pipeline. Основные функции фреймворка включают поддержку различных ассертов, таких как expect, а также работу с хуками, например beforeAll и afterAll, для подготовки тестов.

Пример с хуками:

import { test, expect, beforeAll, afterAll } from '@playwright/test';

let browser;

beforeAll(async () => {
  browser = await playwright.chromium.launch();
});

afterAll(async () => {
  await browser.close();
});

test('Проверка главной страницы', async () => {
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const title = await page.title();
  expect(title).toBe('Example Domain');
});

Поддержка CI/CD

Playwright можно интегрировать в любой CI/CD процесс, поддерживая работу с такими системами, как Jenkins, GitHub Actions, GitLab CI и другие. Этот процесс включает в себя настройку окружения для запуска тестов в браузере, установку зависимостей и конфигурацию тестовых сценариев.

Для этого можно использовать команду npx playwright test, чтобы запускать все тесты в рамках определенной среды.

Отчетность и выводы

Playwright предоставляет несколько вариантов вывода результатов тестов. По умолчанию результаты тестов выводятся в консоль, но можно настроить различные форматы отчетности, такие как HTML, JSON или JUnit.

npx playwright test --reporter=html

Этот подход позволяет интегрировать результаты в сторонние системы мониторинга и отчетности.

Заключение

Playwright представляет собой мощный и гибкий инструмент для автоматизации тестирования веб-приложений. С его помощью можно писать стабильные, быстрые и универсальные тесты, поддерживающие несколько браузеров. Возможности асинхронности, управления контекстами и поддержка CI/CD делают его отличным выбором для современного веб-тестирования.

Оглавление