В этой статье мы подробно разберем Playwright, изучим его функции, преимущества, установку и пошаговое руководство по началу работы с первым тестом.
1. Что такое Playwright?
Playwright — это библиотека с открытым исходным кодом, разработанная Microsoft с использованием TypeScript. Это универсальный инструмент, который позволяет автоматизировать тестирование веб-приложений в браузерах Chromium, Firefox и WebKit, используя единый API. Это значит, что вы можете обеспечить работоспособность своего приложения на разных браузерах и не писать отдельные тесты для каждого из них. Одной из ключевых особенностей Playwright является его способность оставаться современным, мощным, надежным и быстрым инструментом.
Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ
2. Зачем использовать Playwright?
Сквозное тестирование и кроссбраузерная совместимость
Playwright позволяет проводить полное сквозное тестирование и проверку совместимости с разными браузерами для современных веб-приложений. Вы можете быть уверены, что ваше приложение работает безупречно в таких популярных браузерах, как Chromium, Firefox и WebKit.
Богатый набор функций
Playwright оснащен множеством функций, которые облегчают тестирование. Некоторые из них:
- Headless-режим: выполнение тестов в headless-режиме для более быстрой и эффективной работы. Headless («безголовый») это режим работы браузера без графического интерфейса.
- Скриншоты: захват скриншотов во время тестов для визуального анализа состояния приложения.
- Запись видео: запись тестовых сессий для их последующего анализа.
- Мокирование сети: имитация сетевых условий и ответов для тщательного тестирования.
Поддержка нескольких языков программирования
Playwright предлагает удобный и интуитивно понятный API с поддержкой разных языков программирования, таких как JavaScript, Python, Java и C#. Это позволяет вашей команде использовать тот язык, который им удобен, оставаясь при этом в рамках возможностей Playwright.
Примечание редакции: вас также может заинтересовать статья «Быстрое и практическое введение в Playwright»
3. Как установить и использовать Playwright
Прежде чем приступить к первому тесту, необходимо установить Playwright. Вот как это сделать:
Требования
Playwright требует Node.js версии 10.15 или выше. Если у вас нет установленного Node.js, загрузите и установите его с официального сайта Node.js.
Установка
Вы можете установить Playwright с помощью npm или yarn, в зависимости от ваших предпочтений.
Вот команда для установки через npm:
npm init playwright@latest
После установки вы готовы начать писать и запускать тесты.
Создание тестового сценария
Чтобы создать тестовый сценарий, нужно импортировать модуль Playwright в ваш JavaScript файл:
const { chromium } = require('playwright');
(async () => {
// ваш тест
})();
Теперь можно начинать писать первый тест.
4. Первый тест с Playwright
Создание браузера
Первый шаг — создание объекта Browser. Вы можете выбрать браузер Chromium, Firefox или WebKit. Также можно настроить такие параметры, как headless-режим, чтобы контролировать видимость браузера во время тестирования:
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Ожидаем, что заголовок содержит подстроку.
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Клик по ссылке "Get started".
await page.getByRole('link', { name: 'Get started' }).click();
// Ожидаем, что на странице появится заголовок с текстом "Installation".
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
Навигация
Большинство тестов начинается с перехода по URL. После этого тест может взаимодействовать с элементами страницы:
await page.goto('https://playwright.dev/');
Playwright будет ждать, пока страница полностью загрузится, прежде чем продолжить выполнение. Рекомендуем поизучать параметры page.goto() для большего понимания.
5. Взаимодействия
Действия в Playwright начинаются с поиска элементов. Для этого используются локаторы (Locators). Локаторы представляют собой способ нахождения элемента(ов) на странице в любой момент времени. Playwright автоматически ждет, пока элемент станет доступным для взаимодействия, поэтому нет необходимости отдельно задавать ожидание элементов.
// Создание локатора
const getStarted = page.getByRole('link', { name: 'Get started' });
// Клик по элементу
await getStarted.click();
В большинстве случаев это можно записать в одну строку:
await page.getByRole('link', { name: 'Get started' }).click();
6. Утверждения (assertions)
Playwright включает функции утверждений (assertions) с помощью метода expect. Чтобы сделать утверждение, вызовите expect(value) и выберите подходящий матчтер, который отражает ваше ожидание. Существуют общие матчтеры, такие как toEqual, toContain, toBeTruthy, которые можно использовать для утверждения различных условий:
expect(success).toBeTruthy();
Также Playwright поддерживает асинхронные матчтеры, которые будут ожидать выполнения ожидаемого условия. Это делает тесты более надежными и устойчивыми.
Пример: этот код будет ждать, пока заголовок страницы не будет содержать строку «Playwright»:
await expect(page).toHaveTitle(/Playwright/);
7. Изоляция тестов
В Playwright Test используется концепция тестовых фикстур (fixtures). Одна из них — это встроенная фикстура страницы page, которая передаётся в тесты.
Каждый тест изолирован за счёт использования контекста браузера (Browser Context). Это как работа с новым, чистым профилем браузера для каждого теста. Даже если тесты выполняются в одном браузере, они всегда запускаются в свежей среде, чтобы избежать влияния друг на друга.
Пример теста tests/example.spec.ts:
test('basic test', async ({ page }) => {
// ...
});
8. Использование хуков в тестах
Вы можете использовать различные хуки, такие как test.describe, чтобы объявить группу тестов, а также test.beforeEach и test.afterEach, которые выполняются до/после каждого теста.
Другие хуки включают test.beforeAll и test.afterAll, которые выполняются один раз перед всеми тестами и после всех тестов соответственно.
Пример:
import { test, expect } from '@playwright/test';
test.describe('navigation', () => {
test.beforeEach(async ({ page }) => {
// Переход на начальный URL перед каждым тестом.
await page.goto('https://playwright.dev/');
});
test('main navigation', async ({ page }) => {
// Утверждения с использованием API expect.
await expect(page).toHaveURL('https://playwright.dev/');
});
});
9. Запуск тестов
Вы можете запускать отдельный тест, набор тестов или все тесты. Тесты могут запускаться в одном браузере или в нескольких одновременно. По умолчанию тесты выполняются в режиме headless, то есть окно браузера не открывается, а результаты отображаются в терминале.
Запуск в режиме UI
Запустите тесты в UI-режиме для улучшенного опыта с возможностью отладки во времени, режимом наблюдения и другими функциями:
npx playwright test --ui
Запуск через командную строку
- Запуск всех тестов:
npx playwright test
- Запуск одного тестового файла:
npx playwright test landing-page.spec.ts
- Запуск тестового набора файлов:
npx playwright test tests/todo-page/ tests/landing-page/
- Запуск файлов с определенными именами:
npx playwright test landing login
- Запуск теста с определенным названием:
npx playwright test -g "add a todo item"
- Запуск тестов в режиме с открытым окном браузера (headed mode):
npx playwright test landing-page.spec.ts --headed
- Запуск тестов в определенном проекте:
npx playwright test landing-page.ts --project=chromium
Заключение
В этом подробном руководстве мы изучили Playwright — мощный инструмент для тестирования веб-приложений. Мы рассмотрели его возможности, преимущества, установку и создание первого теста.
Playwright упрощает кроссбраузерное тестирование и предоставляет множество полезных функций, что делает его ценным инструментом для разработчиков и тестировщиков.
Перевод статьи «Mastering Web Application Testing with Playwright: A Comprehensive Guide».