Функциональные тесты веб-приложений с 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 можно ознакомиться здесь.

---

Больше актуальных навыков по тестированию вы можете получить в рамках практических онлайн-курсов от экспертов отрасли.