Playwright: маленький быстрый гайд

• Установка
• Автоматизация
• Тесты

Мощный фреймворк автоматизации действий в браузере и сквозного тестирования веб-приложений. Поддерживает Chrome, Firefox и Safari. 

Гайд рассчитан на уровень middle; описывает установку фреймворка, базовые концепции, автоматизацию действий и тестирование веб-приложений.

Установка

Во первых, нужно установить платформу Node.js (скачать здесь). Создаем каталог нового проекта и переходим туда:

mkdir playwright-beginner
cd playwright-beginner

Инициализируем новый проект Node.js:

npm init -y

Теперь устанавливаем пакет Playwright:

npm install playwright

С пакетом ставятся все три основных браузера.

Базовые концепты Playwright

• Браузер
• Контекст браузера — «песочница» для автоматизации, изолированная от других контекстов
• Страница — одна вкладка в браузере, или окно в контексте

Автоматизация действий в браузере

Доступны следующие задачи:

• Запуск браузера
• Открытие страницы
• Переход по URL
• Работа с элементами на странице
• Снятие скриншота
• Закрытие браузера

Открываем браузер

Для этого метод playwright.chromium.launch(), (или же playwright.firefox.launch(), playwright.webkit.launch() для этих браузеров). Код:

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

(async () => {
  const browser = await chromium.launch();
  // ... perform browser actions ...
  await browser.close();
})();

Открытие страницы

Создается новый контекст и открывается страница:

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

Переход по URL

Метод page.goto():

await page.goto('https://example.com');

Работа с элементами страницы

Много методов, часто используемые: click(), fill(), и selectOption(). 

Пример заполнения и отправки формы:

await page.goto('https://example.com/form');
await page.fill('#name', 'John Doe');
await page.fill('#email', 'john.doe@example.com');
await page.click('#submit-button');

Скриншот

Метод page.screenshot():

await page.screenshot({ path: 'screenshot.png' });

Сохраняет скриншот в PNG-формате в указанной в path папке.

Закрытие браузера

После завершения нужных действий экземпляр браузера закрывается методом browser.close():

await browser.close();

Тестирование веб-приложений

Playwright предназначен, в том числе, для сквозного тестирования веб-приложений:

• Установка и конфигурация тест-раннера
• Создание и упорядочивание тестов
• Выполнение тестов
• Создание репортов

Установка и настройка раннера

В Playwright встроен тест-раннер Playwright Test. Чтобы установить его:

npm install -D @playwright/test

Далее создаем файл playwright.config.js в папке проекта:

// playwright.config.js
module.exports = {
  projects: [
    {
      name: 'Chromium',
      use: { browserName: 'chromium' },
    },
    {
      name: 'Firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'WebKit',
      use: { browserName: 'webkit' },
    },
  ],
};

Эта конфигурация описывает, как тесты будут выполняться в Chromium, Firefox и Safari.

Написание тестов

Создаем новый каталог tests в каталоге своего проекта:

mkdir tests

В этой папке создаем новый файл example.test.js. 

// tests/example.test.js
const { test } = require('@playwright/test');

test('loads the homepage', async ({ page }) => {
  await page.goto('https://example.com');
  const pageTitle = await page.title();
  expect(pageTitle).toBe('Example Domain');
});

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

Команда npx playwright test:

npx playwright test

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

Репорты

Поддерживаются форматы репортов в JSON, JUnit и Allure. Чтобы сгенерировать тест-репорт, добавляем опцию —reporter и указываем формат:

npx playwright test --reporter=json

В папке test-results появится репорт в JSON.

***

Подробнейший гайд по Playwright — по ссылке. Там же и ответы на все вопросы.