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

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

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

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

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

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

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

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

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

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

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

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

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

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

Основы Playwright

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

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

• Что такое  Playwright Test? ^[12]

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

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

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

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

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

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

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

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

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

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

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

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, которые обеспечивают надежное сквозное тестирование:

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

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

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

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

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

Web Assertions

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

Например:

expect(value).toEqual(0);

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

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() ^[24] – это представление элемента(ов) на странице с фиксированной логикой для его извлечения в нужный момент времени;

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

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

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

Test Fixtures

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

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

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

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

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

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

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

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

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

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

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

Таким образом, фикстуры способствуют обеспечению согласованных и изолированных сред тестирования в 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 ^[36] – выполняется перед началом каждого теста в группе;

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

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

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

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

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

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

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

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

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

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