Начало работы с Playwright (Часть 2)

🔖 | Важные ресурсы:

• Getting Started – полноценный гайд по установке.

• Auto-waiting – принципы повышения надежности тестов.

• Web-First Assertions – система повтора действий вплоть до получения желаемого результата.

• Test Fixtures – помощь в параллелизации тестового процесса.

• Test Hooks – помощь в настройке и очистке тестовой среды или тестовых данных.

• Introduction to Playwright Test runner – вводный видеогайд по всем концепциям использования фреймворка.

🎯 Задачи 2-го дня #30DaysOfPlaywright!

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

• Написание assertions – проверка выполнения ожидаемого поведения.

• Использование test fixtures – установка требуемого page/browser context для запуска тестов.

• Использование test hooks – настройка и очистка ресурсов между тестами.

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

Основы Playwright

В моем первом посте я рекомендовал посмотреть доклад  Introduction to Playwright Test runner как хорошее введение в основы работы с Playwright. Ссылки на него будут периодически возникать в разных разделах руководства.

Для удобства ниже собран подробный список ссылок на видео с таймкодами. Вместе с материалами “Начало работы с Playwright” рекомендую до следующего занятия изучить 1-3 главу руководства.

• Что такое  Playwright Test?

• Почему мы создали Test runner?

• Часть 1: Начало работы - Demo – Playwright Test демо.

• Часть 1: Начало работы - Script – детальный разбор тестового примера.

• Часть 2: Основы - изоляция тестов, умное ожидание, базовые web-assertion.

• Часть 3: Конфигурация - Fixtures – тестирование на основе данных, отчет, устройства.

• Часть 4: Инспектор и код-генератор.

• Часть 5: Playwright Tracing – отладка после тестов. 

• Резюме – начало работы, конфигурация, настройка, отладка, trace.

• Q&A – поддержка языков, сравнение с другими тестовыми фреймворками.

Разбор тестового скрипта

Давайте вернемся к коду из первого теста, который мы создали и запустили в первый день.

const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

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

• Умное ожидание – выполнение проверки элементов перед осуществлением запрошенного действия.

• Web-First Assertions – повторение проверки до тех пор, пока не будет выполнено необходимое условие.

• Тестовая изоляция с fixtures – создание надежной среды для тестирования, включение распараллеливания.

• Test Hooks – настройка и очищение общих ресурсов между тестами.

Давайте рассмотрим их вкратце ниже.

Web Assertions

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

Например:

expect(value).toEqual(0);

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

await expect(page).toHaveTitle("Playwright");

Давайте попробуем пример написания утверждений:

// assert.spec.js
const { test, expect } = require('@playwright/test');

test('my test', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);

  // Expect an attribute "to be strictly equal" to the value.
  await expect(page.locator('text=Get Started').first()).toHaveAttribute('href', '/docs/intro');

  // Expect an element "to be visible".
  await expect(page.locator('text=Learn more').first()).toBeVisible();

  await page.click('text=Get Started');
  // Expect some text to be visible on the page.
  await expect(page.locator('text=Introduction').first()).toBeVisible();
});

Сохраните его в новом файле (assert.spec.js) и запустите следующим образом:

$ npx playwright test assert.spec.js

Аргумент {page}, представленный в тесте, является примером test fixture. О том, что такое фикстуры, мы поговорим в следующем разделе.

На данный момент вы можете просмотреть документацию по классу page  и увидеть, что он предоставляет методы взаимодействия с одной вкладкой браузера и обработки различных событий. Например:

• метод  page.locator() – это представление элемента(ов) на странице с фиксированной логикой для его извлечения в нужный момент времени;

• page.goto() – переход на любую страницу в браузере;

• page.click() – клик по элементу на странице, соответствующей селектору.

Доступные утверждения в Playwright будут подробно рассмотрены в одном из следующих постов.

Test Fixtures

Вдохновленный pytest-ом, test fixtures – инструмент для создания надежной и согласованной тестовой среды, которая предоставляет тестам именно то, что им нужно для текущего запуска (и не более того). Playwright Test анализирует все fixture, необходимые для тестирования, объединяет требуемые значения в один объект и делает его доступным для test в качестве первого параметра. По окончании теста фикстура демонтируется.

Почему fixture? Потому что они создают согласованную среду (повторяемость тестирования) и обеспечивают эффективную изоляцию для выполняемого теста со следующими преимуществами:

• Эффективность. Запускайте несколько тестов параллельно, быстрее и с меньшим объемом используемой памяти.

• Таргетинг. Повторите только что провалившиеся тесты без повторного запуска всего набора.

• Группировка. Групповые тесты проводятся на основе общего смысла, а не просто заданной установки.

Playwright поставляется с рядом встроенных fixture, которые вы можете настроить.

• fixtures.browser – общий экземпляр браузера (для worker);

• fixtures.browserName – текущий запуск (chromium, firefox or webkit);

• fixtures.context – изолирует контекст браузера (для test);

• fixtures.page – изолирует страницу (per test).

Вы можете использовать Test Fixture на этапе детализации тестирования или Worker Fixtures, чтобы применять их на уровне рабочего процесса (во всех контролируемых тестах). 

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

Test Hooks

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

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

test.describe('feature foo', () => {
  test.beforeEach(async ({ page }) => {
    // Go to the starting url before each test.
    await page.goto('https://playwright.dev/');
  });

  test('my test', async ({ page }) => {
    // Assertions use the expect API.
    await expect(page).toHaveURL('https://playwright.dev/');
  });
});

Метод test.describe используется для объявления группы тестов. К тестовым хукам, с которыми нам нужно ознакомиться, относятся:

• test.beforeEach – выполняется перед началом каждого теста в группе;

• test.afterEach – запускается после завершения каждого теста в группе;

• test.beforeAll – запускается один раз для каждой группы перед запуском любых тестов;

• test.afterAll – запускается один раз для каждой группы после завершения всех тестов.

День 2: Итог и ресурсы

• [X] Изучена библиотека expect, используемая по умолчанию.

• [X] Изучены  web assertions, доступные в Playwright.

• [X] Рассмотрены fixtures в pytest.

• [X] Рассмотрены fixtures, использующиеся в Playwright.

• [X] Изучено Playwright Test API для поддержки test hooks.

• [X] Выполнен Getting Started туториал по Playwright.