Использование Playwright

Введение в Playwright и Mocha

Playwright — это современный инструмент для автоматизации браузеров, который позволяет проводить end-to-end тестирование веб-приложений. Он поддерживает все основные браузеры: Chrome, Firefox и WebKit. Mocha — это один из самых популярных фреймворков для тестирования в JavaScript, обеспечивающий гибкость, простоту и богатую функциональность. Комбинирование Mocha и Playwright предоставляет мощный инструмент для написания и выполнения тестов для веб-приложений с использованием реальных браузеров.

Настройка окружения

Перед тем как начать, необходимо установить все требуемые зависимости. Для этого используется Node.js. В первую очередь следует установить сам Playwright и Mocha.

npm install playwright mocha

Кроме того, рекомендуется установить chai — библиотеку для ассертов, чтобы удобнее было проверять результаты тестов.

npm install chai

С этим набором библиотек можно приступать к написанию тестов.

Структура тестов с Mocha и Playwright

Mocha использует концепцию “suite” (набора тестов) и “test” (индивидуального теста), которые определяются с помощью функций describe() и it(). В тестах Playwright нужно будет использовать API для работы с браузером, например, browser.newContext(), page.goto(), page.click() и другие.

Пример базовой структуры теста:

const { chromium } = require('playwright');
const { expect } = require('chai');

describe('Тестирование веб-страницы', function() {
  let browser;
  let page;

  before(async () => {
    browser = await chromium.launch();
    page = await browser.newPage();
  });

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

  it('должен успешно загрузить главную страницу', async () => {
    await page.goto('https://example.com');
    const title = await page.title();
    expect(title).to.equal('Example Domain');
  });
});

Детали выполнения тестов

  1. before() и after(): Функции before() и after() выполняются перед и после всех тестов в наборе. Они предназначены для подготовки и очистки ресурсов, таких как запуск браузера и закрытие его после завершения тестов.

  2. beforeEach() и afterEach(): Эти функции выполняются перед и после каждого теста. Они полезны для подготовки данных или состояния, которое необходимо для каждого отдельного теста.

beforeEach(async () => {
  page = await browser.newPage();
});

afterEach(async () => {
  await page.close();
});
  1. Использование Page API: Playwright предоставляет обширный API для взаимодействия с веб-страницей. Например, можно кликать по элементам, заполнять формы, проверять текст или даже делать скриншоты.
await page.click('button#submit');
await page.fill('input[name="username"]', 'testuser');
  1. Ассерты с Chai: Chai позволяет легко проверять ожидаемые результаты. В тестах с Mocha используется синтаксис expect(), который позволяет писать читаемые утверждения. Например:
expect(await page.title()).to.equal('Example Domain');
expect(await page.isVisible('button#submit')).to.be.true;

Советы по работе с Playwright

  1. Ожидания и тайм-ауты: Важной частью работы с Playwright является управление ожиданиями. В отличие от статичных тестов, веб-страницы могут загружаться с задержками или содержать динамические элементы. Playwright имеет встроенные методы ожидания, такие как waitForSelector(), которые позволяют гарантировать, что элементы появились на странице.
await page.waitForSelector('div#content');
  1. Скриншоты и видео: Для отладки тестов полезно делать скриншоты или записывать видео. Playwright поддерживает создание скриншотов и видео в процессе выполнения тестов. Это позволяет анализировать, что происходило с приложением в момент ошибки.
await page.screenshot({ path: 'screenshot.png' });
await page.video().saveAs('video.mp4');
  1. Тестирование в разных браузерах: Playwright позволяет запускать тесты не только в Chromium, но и в Firefox и WebKit. Это полезно для кросс-браузерного тестирования. Для этого достаточно указать другой браузер в коде.
const { firefox } = require('playwright');
const browser = await firefox.launch();
  1. Динамическое взаимодействие с элементами: Если приложение использует JavaScript для динамического обновления контента, важно правильно взаимодействовать с элементами, которые могут появиться через определённое время. Playwright поддерживает асинхронные методы, которые позволяют дожидаться появления элементов.
await page.waitForSelector('div.dynamic-content', { timeout: 5000 });

Параллельное выполнение тестов

Mocha поддерживает выполнение тестов параллельно с использованием флага --parallel. Это может значительно ускорить тестирование при большом количестве тестов. Для этого важно правильно настроить создание экземпляров браузера и страниц, чтобы каждый тест выполнялся в изолированном контексте.

mocha --parallel

Работа с локальными данными и состоянием

Часто в тестах необходимо работать с данными, которые сохраняются в локальном хранилище или куки. Playwright предоставляет методы для работы с этим состоянием.

// Установить куки
await page.context().addCookies([{ name: 'session', value: 'abc123', domain: 'example.com' }]);

// Извлечь данные из localStorage
const value = await page.evaluate(() => localStorage.getItem('user'));

Мокирование и перехват запросов

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

await page.route('**/api/data', (route) => {
  route.fulfill({
    status: 200,
    body: JSON.stringify({ data: 'mocked data' })
  });
});

Визуальное тестирование

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

const screenshot = await page.screenshot();
expect(screenshot).to.matchImageSnapshot();

Заключение

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

Оглавление