Быстрое и практическое введение в Playwright

/ -- ПРЕДПРОСМОТР СТАТЬИ --
// ✅ Написание и запуск тестов
test("Простой тест", async ({ page }) => {
  // ✅ Как выполнить навигацию
  await page.goto("https://playwright.dev/");
  page.getByRole("link", { name: "Get started" }).click();

  // ✅ Как выбрать элементы и выполнить действия
  await page
    .getByRole("listitem")
    .filter({ hasText: "Product A" })
    .getByRole("button", { name: "Add to cart" })
    .click();

  // ✅ Как написать утверждения / ожидания
  await page.getByRole("button", { name: "submit" }).toBeEnabled();

  // ✅ Как замокировать API-запросы с тестовыми данными
  await page.route("*/**/api/v1/fruits", async (route) => {
    const json = [{ name: "Strawberry", id: 21 }];
    await route.fulfill({ json });
  });
});

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

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

Содержание

• Навигация
• Выбор элементов
• Действия
• Утверждения
• Мокирование API

Если вы ещё не установили Playwright, смотрите документацию Playwright — Установка Playwright.

Примечание редакции: вас также может заинтересовать статья “Как работать с текстовыми полями в Playwright?”

Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ

1. Навигация (создание нашего первого теста)

В Playwright есть два основных способа навигации по страницам:

1. Через URL. Используйте команду page.goto(url), чтобы напрямую перейти на указанный URL.
2. Через действия. Навигация может происходить также через взаимодействие с элементами страницы, например, кликами по ссылкам или кнопкам, которые ведут на новые страницы.

Давайте создадим пример в папке наших тестов под названием example.spec.ts:

// tests/example.spec.ts
import { test } from "@playwright/test";

test("Простой тест", async ({ page }) => {
  // Загрузка страницы напрямую по URL
  await page.goto("https://playwright.dev/");

  // Переход по странице через ссылки
  page.getByRole("link", { name: "Get started" }).click();
});

Навигация, действия, селекторы и другие операции выполняются через объект страницы (page object), который предоставляется тестом Playwright.

Чтобы запустить тесты в Playwright, можно использовать два режима:

• Без интерфейса: выполните команду npx playwright test. Этот режим запускает тесты в фоновом режиме без графического интерфейса.
• С интерфейсом: выполните команду npx playwright test --ui. Этот режим открывает графический интерфейс, где можно просматривать, запускать и отлаживать тесты более наглядно.

2. Выбор элементов

Выбор элементов осуществляется через локаторы. Playwright рекомендует отдавать приоритет атрибутам, видимым для пользователя. Это значит, что вы можете выбрать кнопку по её пользовательской метке, а не по скрытому data-id.

const submit = page.getByRole("button", { name: "submit" });

Локаторы в Playwright схожи с функцией get из Cypress.

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

const product = page.getByRole("listitem").filter({ hasText: "Product A" });

// Фильтр + Цепочка + Действие
await page.getByRole("listitem")  
  .filter({ hasText: "Product A" })  
  .getByRole("button", { name: "Add to cart" })  
  .click();

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

Метод	Описание
page.getByRole(role)	Находит элементы на основе их роли (например, "button", "textbox").
page.getByText(text)	Находит элементы, содержащие указанный текст.
page.getByLabel(label)	Находит элемент управления формой по связанному тексту метки.
page.getByPlaceholder(placeholder)	Находит элемент ввода по его тексту-заполнителю.
page.getByAltText(altText)	Находит элемент, обычно изображение, по его альтернативному тексту.
page.getByTitle(title)	Находит элемент по значению атрибута title.
page.getByTestId(dataTestId)	Находит элемент на основе значения атрибута data-testid.

Примечание редакции: вас также может заинтересовать статья “Как работать с выпадающими списками в Playwright?”

3. Действия

Вы можете вызвать действие из любого локатора как это показано в предыдущем разделе. Например, заполнить текст в поле формы или установить флажок (чекбокс):

await page.getByLabel("Application Name").fill("Flotes App");
await page.getByLabel("I agree to the terms and conditions").check();

В таблице представлены методы, которые описывают некоторые действия в Playwright.

Метод	Описание
locator.check()	Отметить флажок (чекбокс).
locator.click()	Кликнуть на элемент.
locator.uncheck()	Снять отметку с флажка (чекбокса).
locator.hover()	Навести курсор мыши на элемент.
locator.fill(text)	Заполнить поле формы указанным текстом.
locator.focus()	Установить фокус на элемент.
locator.press(key)	Нажать клавишу (клавиша указывается как аргумент).
locator.setInputFiles(filepath)	Выбрать файлы для загрузки (путь к файлу указывается как аргумент).
locator.selectOption(value)	Выбрать опцию в выпадающем меню на основе значения.

4. Утверждения

В Playwright для написания утверждений (assertions) используется expect. Playwright предоставляет множество матчеров, возвращаемых методом page.expect(value).

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

// Или можно сохранить локатор в переменную для повторного использования
await page.getByRole("button", { name: "submit" }).toBeVisible();
await page.getByRole("button", { name: "submit" }).toBeEnabled();
await page.getByRole("button", { name: "submit" }).toContainText("submit");

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

Метод	Описание
await expect(locator).toBeChecked()	Проверяет, что флажок, идентифицированный локатором, установлен.
await expect(locator).toBeEnabled()	Проверяет, что элемент управления, идентифицированный локатором, активирован.
await expect(locator).toBeVisible()	Проверяет, что элемент, идентифицированный локатором, видим.
await expect(locator).toContainText(text)	Проверяет, что элемент, идентифицированный локатором, содержит указанный текст.
await expect(locator).toHaveAttribute(name, value)	Проверяет, что элемент, идентифицированный локатором, имеет указанный атрибут с необязательным совпадающим значением.
await expect(locator).toHaveCount(count)	Проверяет, что количество элементов, соответствующих локатору, равно указанному количеству.
await expect(locator).toHaveText(text)	Проверяет, что текстовое содержимое элемента, идентифицированного локатором, совпадает с указанным текстом.
await expect(locator).toHaveValue(value)	Проверяет, что значение элемента ввода, идентифицированного локатором, совпадает с указанным значением.

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

5. Мокирование API

Мокирование API в сквозном (е2е) тестировании позволяет создавать устойчивые, стабильные тесты, которые не зависят от состояния сети или реального API. Чтобы замокировать API или эндпоинт в Playwright, используйте page.route(glob, callback). Когда Playwright обнаруживает вызов API, который соответствует шаблону URL, переданному в route, он обходит фактический HTTP-запрос и возвращает фальшивый ответ.

// Мокируем эндпоинт
await page.route("*/**/api/v1/fruits", async (route) => {
  const json = [{ name: "Strawberry", id: 21 }];
  await route.fulfill({ json });
});

// Ожидание ответа
const responsePromise = page.waitForResponse("*/**/api/v1/fruits");
await page.getByText("Fruits").click();
const response = await responsePromise;
await page
  .getByRole("listitem")
  .filter({ hasText: "Strawberry" })
  .toBeVisible();

Мы рассмотрели простой пример, но стоит знать, что мокирование API в Playwright — это функция с множеством возможностей и уровней сложности.

Заключение

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

Перевод статьи «Playwright: A Fast and Practical Introduction».