Функциональные тесты веб-приложений с Playwright: основы
Привет, Хабр!
Функциональное тестирование стало неотъемлемой частью процесса обеспечения качества в веб-разработке. В этой статье рассмотрим возможности Playwright — мощного инструмента для автоматизации тестирования.
Playwright — это библиотека для автоматизации браузеров, разработанная командой Microsoft. Она позволяет взаимодействовать с веб-приложениями так, как это делает пользователь, поддерживая работу с несколькими браузерами, включая Chrome, Firefox и Safari. Главная фича Playwright заключается в его способности работать не только с браузерами, но и с мобильными приложениями.
Установка
Вам понадобится Node.js. Если Node.js уже есть, открываем терминал и выполняем следующую команду:
npm init -y
npm install playwrightПосле этого можно установить необходимые браузеры. Playwright позволяет сделать это одной командой:
npx playwright installТеперь создадим простую структуру проекта. Рекомендуется создавать папку для тестов:
mkdir tests
cd tests
touch example.spec.jsТеперь откроем example.spec.js и напишем первый тест. Проверим, открывается ли главная страница Habr:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://habr.com/');
const title = await page.title();
console.log(`Заголовок страницы: ${title}`);
await browser.close();
})();Запускаем этот код командой:
node example.spec.jsЕсли все прошло успешно, в терминале вы увидите заголовок страницы Habr.
Пора переходить к обзору основных функций.
Основные функции Playwright
Playwright — это асинхронная библиотека, и большинство её методов возвращают промисы. Это значит, что нужно быть готовыми работать с async/await. Д
Можно выбрать один из трех браузеров. Вот как это делается:
const { chromium, firefox, webkit } = require('playwright');
(async () => {
const browser = await chromium.launch(); // Выбираем браузер
const context = await browser.newContext(); // Создаем новый контекст
const page = await context.newPage(); // Открываем новую страницу
// Ваши тесты здесь
await browser.close(); // Закрываем браузер
})();Навигация по страницам — это основа функционального тестирования. Можно юзать метод goto() для перехода на нужный URL:
await page.goto('https://habr.com/');Теперь поговорим о том, как взаимодействовать с элементами на странице. Playwright предоставляет несколько методов для поиска элементов, включая:
page.click(selector)— клик по элементу.page.fill(selector, value)— заполнение текстового поля.page.selectOption(selector, value)— выбор значения в выпадающем списке.
Пример использования этих методов:
await page.click('text=Войти'); // Клик по кнопке "Войти"
await page.fill('input[name="username"]', 'your_username'); // Заполнение поля логина
await page.fill('input[name="password"]', 'your_password'); // Заполнение поля пароля
await page.click('button[type="submit"]'); // Клик по кнопке отправкиPlaywright имеет встроенные механизмы ожидания, которые позволяют убедиться, что элемент доступен для взаимодействия. Например, можно использовать:
page.waitForSelector(selector)— ждет, пока элемент станет доступным.page.waitForTimeout(milliseconds)— ожидание определенного времени.
Пример:
await page.waitForSelector('text=Добро пожаловать', { timeout: 5000 });Чтобы убедиться, что тесты работают корректно, можно делать скриншоты страниц:
await page.screenshot({ path: 'screenshot.png', fullPage: true });Playwright позволяет обрабатывать браузерные диалоги, такие как alert, confirm и prompt. Вот как это сделать:
page.on('dialog', async dialog => {
console.log(dialog.message());
await dialog.accept(); // Или dialog.dismiss() для закрытия
});Примеры тестов
Автоматизированный тест входа на сайт
Начнем с простого, но важного теста: автоматизации процесса входа на сайт. Допустим, нужно убедиться, что форма авторизации работает корректно.
Вот как это может выглядеть:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.com/login');
// Заполнение формы
await page.fill('input[name="username"]', 'your_username');
await page.fill('input[name="password"]', 'your_password');
await page.click('button[type="submit"]');
// Ожидание перенаправления и проверка результата
await page.waitForURL('https://example.com/dashboard');
const title = await page.title();
console.log(`Заголовок страницы после входа: ${title}`);
await browser.close();
})();Этот тест открывает страницу входа, заполняет поля логина и пароля, и нажимает кнопку входа. Затем он ждет, пока страница перенаправит пользователя на дашборд, и проверяет заголовок страницы, чтобы убедиться, что все прошло успешно.
Сбор данных с веб-страницы
Теперь рассмотрим более сложный пример, в котором мы соберем данные с веб-страницы. Допустим, нужно получить заголовки статей с главной страницы Хабра:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://habr.com/');
// Сбор заголовков статей
const titles = await page.$$eval('h2 a', links => links.map(link => link.textContent));
console.log('Заголовки статей:');
titles.forEach((title, index) => {
console.log(`${index + 1}: ${title}`);
});
await browser.close();
})();Используем метод $$eval() для извлечения текста заголовков статей. Это позволяет собрать все заголовки в массив и вывести их в консоль.
Тестирование взаимодействия с элементами
В последнем примере протестируем сложное взаимодействие с элементами на странице. Предположим, есть форма обратной связи, и нужно протестировать, что пользователь может успешно отправить свои данные:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://example.com/contact');
// Заполнение формы
await page.fill('input[name="name"]', 'John Doe');
await page.fill('input[name="email"]', 'john.doe@example.com');
await page.fill('textarea[name="message"]', 'Hello, this is a test message!');
await page.click('button[type="submit"]');
// Ожидание успешного сообщения
await page.waitForSelector('text=Спасибо за ваше сообщение!', { timeout: 5000 });
console.log('Сообщение отправлено успешно!');
await browser.close();
})();Здесь заполняем форму обратной связи, кликаем по кнопке отправки и ждем появления сообщения об успешной отправке.
Подробнее с Playwright можно ознакомиться здесь.
Больше актуальных навыков по тестированию вы можете получить в рамках практических онлайн-курсов от экспертов отрасли.
Habrahabr.ru прочитано 574 раза
