Привет, Хабр!

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

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

Функциональные тесты веб-приложений с Playwright: основы