В мире разработки программного обеспечения тестирование является важной частью процесса создания качественного продукта. С течением времени тестирование становится все более автоматизированным, что позволяет существенно ускорить процесс и улучшить качество тестирования. В этой статье мы рассмотрим, как начать писать тесты на JavaScript с использованием Playwright.
Что такое Playwright?
Playwright — это инструмент для автоматизации тестирования веб-приложений, разработанный компанией Microsoft. Playwright позволяет запускать тесты на нескольких браузерах одновременно, упрощает взаимодействие с веб-страницами и обеспечивает высокую скорость работы.
Как начать использовать Playwright?
Шаг 1: Установка Node.js
Перед тем, как начать использовать Playwright, необходимо установить Node.js на свой компьютер, если он еще не установлен. Node.js — это среда выполнения JavaScript, которая позволяет запускать JavaScript на стороне сервера. Вы можете скачать установщик Node.js с официального сайта Node.js.
Шаг 2: Создание проекта Node.js
После установки Node.js необходимо создать новый проект Node.js. Вы можете использовать команду npm init для создания нового проекта. В этом проекте вы будете писать свои тесты на JavaScript с использованием Playwright.
Шаг 3: Установка Playwright
После создания проекта необходимо установить Playwright, используя команду npm install playwright. Это установит Playwright и все необходимые зависимости.
Шаг 4: Создание файла с тестами
Создайте файл с тестами и добавьте в него необходимые импорты, например:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// здесь можно добавить тестовые сценарии
await browser.close();
})();
Шаг 5: Добавление тестовых сценариев
Добавьте необходимые тестовые сценарии в свой файл с тестами. Например:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
// Проверяем заголовок страницы
expect(await page.title()).toBe('Example Domain');
// Заполняем форму на странице и отправляем ее
await page.fill('#username', 'user123');
await page.fill('#password', 'pass123');
await page.click('#submit-button');
// Проверяем, что мы перешли на новую страницу
expect(page.url()).toContain('/dashboard');
await browser.close();
})();
Шаг 6: Запуск тестов
После написания тестовых сценариев вы можете запустить свои тесты, используя команду npm test.
Шаг 7: Настройка тестового окружения
Вы можете настроить свое тестовое окружение, чтобы использовать различные браузеры, например, Chromium, Firefox или WebKit. Вы можете выбрать браузер, используя следующий код:
const { chromium, firefox, webkit } = require('playwright');
const browserType = process.env.BROWSER || 'chromium';
let browser;
switch (browserType) {
case 'chromium':
browser = chromium;
break;
case 'firefox':
browser = firefox;
break;
case 'webkit':
browser = webkit;
break;
default:
console.error('Invalid browser type');
process.exit(1);
}
(async () => {
const browser = await browserType.launch();
// ваш код тестирования
await browser.close();
})();
Вы можете указать тип браузера, используя переменную среды BROWSER. Например, если вы хотите запустить тесты в Firefox, используйте команду BROWSER=firefox npm test.
Добавлю несколько лайфхаков, которые могут помочь вам при работе с Playwright.
- Используйте функцию waitForSelector для ожидания появления элемента на странице перед выполнением действия.
await page.waitForSelector('#my-element');
await page.click('#my-element');
2. Для удобства вы можете использовать метод fillForm для заполнения формы на странице.
await page.fillForm('form', {
'input[name="username"]': 'user123',
'input[name="password"]': 'pass123',
});
await page.click('button[type="submit"]');
3. Чтобы визуально убедиться, что тесты выполняются правильно, вы можете использовать параметр headless: false при запуске браузера. Таким образом, браузер будет запущен в режиме отображения окна, и вы сможете увидеть, как выполняются ваши тесты.
const browser = await chromium.launch({ headless: false });
4. Если вы хотите запустить тесты в нескольких браузерах одновременно, вы можете использовать функцию Promise.all.
const [browser1, browser2, browser3] = await Promise.all([
chromium.launch(),
firefox.launch(),
webkit.launch(),
]);
5. Используйте метод evaluate для выполнения JavaScript кода на странице.
const pageTitle = await page.evaluate(() => document.title);
console.log(pageTitle);
6. Для симуляции долгой нагрузки или задержки на странице вы можете использовать метод waitForTimeout.
await page.click('#my-element');
await page.waitForTimeout(1000); // ждем 1 секунду
await page.click('#my-other-element');
Надеюсь, эти лайфхаки помогут вам улучшить ваш опыт работы с Playwright!
В заключение:
Playwright — это мощный инструмент для автоматизации тестирования веб-приложений на JavaScript. Он позволяет упростить процесс тестирования, ускорить его и улучшить качество. Начать использование Playwright не сложно, достаточно выполнить несколько простых шагов, и вы сможете начать писать тесты на JavaScript с помощью Playwright.
