Playwright на практиці: від ручного до автоматизованого тестування за 60 хвилин

Playwright відкриває неймовірні можливості для автоматизації тестування вебдодатків, дозволяючи нам створювати тести на різних мовах програмування – TypeScript, JavaScript, Python, .NET та Java. Чи знаєте ви, що цей потужний інструмент може значно зменшити час і зусилля, які витрачаються на ручне тестування?

Порівняно з Selenium, який традиційно вважався провідним інструментом для тестування вебдодатків, Playwright є зручнішим, швидшим та стабільнішим. Саме тому ми віддаємо перевагу Playwright Automation для щоденних завдань тестування. Ба більше, Playwright надає потужні інструменти для тестування API, що дозволяє нам гнучко налаштовувати процеси тестування, адаптуючи їх під конкретні потреби нашої команди. Це дає змогу створювати комплексні сценарії, які перевіряють як користувацький інтерфейс, так і серверну частину нашого додатка, що значно підвищує ефективність та покриття наших тестів. У протистоянні Selenium vs Playwright переваги останнього стають особливо помітними, коли мова йде про швидкість виконання та стабільність тестів. Отож за даними порівняльних тестів, Playwright виконує типовий набір UI-тестів на 30-40% швидше, ніж Selenium. Наприклад, сценарій зі 100 тест-кейсів може виконуватися за 5 хвилин у Playwright проти 7-8 хвилин у Selenium. А також Playwright демонструє значно нижчий рівень нестабільних тестів (тестів, які випадково падають). Тож у середньому, кількість нестабільних тестів зменшується на 60-70% при переході з Selenium на Playwright.

Однак, це ще не все. Інтеграція бібліотек @axe-core/playwright, playwright-lighthouse та pa11y відкриває нам доступ до автоматизованого тестування доступності  — критично важливого аспекту для компаній, які дбають про всіх своїх користувачів. Завдяки цьому ми можемо забезпечити, що наші вебдодатки будуть зручними для людей з обмеженими можливостями, а також це допомагає компаніям уникнути потенційних штрафів за недотримання вимог доступності.

У цій статті ми розглянемо, як за 60 хвилин перейти від ручного до автоматизованого тестування за допомогою Playwright.

Ви дізнаєтеся:

• як швидко налаштувати середовище для роботи з Playwright;
• як написати свій перший автоматизований тест;
• як інтегрувати тестування доступності у ваш проєкт;
• як оптимізувати та масштабувати тести для більшої ефективності.

Перш ніж писати складні тести, потрібно правильно налаштувати середовище. Почнемо нашу подорож із Playwright, зосередившись на швидкому та ефективному налаштуванні за 10 хвилин.

Встановлення Playwright через npx

Для встановлення Playwright ми будемо використовувати NPM (Node Package Manager). NPM — це менеджер пакетів для JavaScript, який дозволяє легко встановлювати та керувати залежностями проєкту. Якщо ви раніше не працювали з NPM, не хвилюйтеся — це простий у використанні інструмент, який значно спрощує процес розробки.

Перш ніж почати, переконайтеся, що у вас встановлено Node.js та NPM. Ви можете перевірити це, виконавши команди node -v та npm -v у терміналі. Якщо ці команди не розпізнаються, вам потрібно спочатку встановити Node.js з офіційного сайту.

Після цього ми можемо перейти до встановлення Playwright. Відкрийте термінал і виконайте:

npm init playwright@latest

Ця команда не лише встановить Playwright, але й ініціалізує базову структуру проєкту для тестування.

Під час інсталяції вам запропонують декілька варіантів налаштувань:

• обрати мову програмування (TypeScript або JavaScript);
• вказати назву теки для тестів (зазвичай «tests» або «e2e»);
• встановити підтримувані браузери.

Для найшвидшого старту рекомендуємо обрати TypeScript, прийняти назву теки за замовчуванням і встановити браузери автоматично.

Ці кроки допоможуть вам швидко налаштувати середовище для початку роботи з Playwright, незалежно від вашого попереднього досвіду з NPM чи автоматизованим тестуванням.

Playwright підтримує TypeScript «з коробки», не потребуючи додаткової конфігурації. Однак, для зручності варто налаштувати базовий tsconfig.json:

{

  "compilerOptions": {

    "target": "ESNext",

    "module": "commonjs",

    "moduleResolution": "Node",

    "sourceMap": true,

    "outDir": "./dist",

    "baseUrl": "."

  }

}

Для локальної розробки корисно запустити компілятор TypeScript у фоновому режимі спостереження:

npx tsc -p tsconfig.json --noEmit -w

Це дозволить відстежувати помилки типізації під час написання тестів.

Налаштування playwright.config.ts для зручності запуску

Файл playwright.config.ts — це серце налаштувань Playwright. Після інсталяції він створюється автоматично, але оптимізуймо його для зручності:

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({

  testDir: './tests',

  timeout: 30000,

  fullyParallel: true,

  retries: process.env.CI ? 2 : 0,

  use: {

    baseURL: 'https://example.com',

    trace: 'on-first-retry',

    screenshot: 'only-on-failure',

    headless: false,

  },

  projects: [

    {

      name: 'chromium',

      use: { ...devices['Desktop Chrome'] },

    },

    {

      name: 'mobile',

      use: { ...devices['Pixel 5'] },

    },

  ],

  reporter: [['html'], ['list']],

});

Ключові налаштування:

1.     testDir — визначає директорію з тестами:

• це шлях до папки, де зберігатимуться ваші тестові файли;
• Наприклад: testDir: './tests' вказує, що всі тести знаходяться в папці «tests» у корені проєкту;
• це допомагає Playwright знати, де шукати тести для виконання.

2.     use.baseURL — базова URL-адреса для тестів:

• це початкова частина URL, яка буде використовуватися для всіх навігацій у ваших тестах.
• наприклад: use: { baseURL: 'https://example.com' }
• тепер, коли ви використовуєте page.goto('/login'), Playwright автоматично перейде на 'https://example.com/login'.
• це спрощує написання тестів та робить їх більш підтримуваними, особливо якщо ви тестуєте різні середовища (розробка, тестування, продакшн).

3.     projects — налаштування для різних браузерів і пристроїв;

4.     reporter — формати звітів про виконання тестів.

Для середовищ з різними конфігураціями можна використати пакет dotenv.

Як встановити пакет dotenv:

1.     Відкрийте термінал у кореневій теці вашого проєкту.

2.     Виконайте наступну команду для встановлення dotenv через npm (Node Package Manager):

npm install dotenv

Якщо ви використовуєте Yarn, команда буде такою:

yarn add dotenv

3.     Після успішного встановлення, ви побачите dotenv у списку залежностей у вашому файлі package.json.

4.     Тепер ви можете використовувати dotenv у своєму проєкті, імпортуючи його на початку вашого головного файлу:

javascript

require('dotenv').config()

Або, якщо ви використовуєте ES модулі:

javascript

import dotenv from 'dotenv'

dotenv.config()

Припустімо, у нас є різні тестові середовища: розробка, тестування та продакшн. Кожне середовище має свій URL та облікові дані для входу.

Ось як ми можемо використовувати dotenv для керування цими конфігураціями:

1.     Створіть файли .env для кожного середовища:

.env.development:

BASE_URL=https://dev.example.com

USERNAME=devuser

PASSWORD=devpass

.env.testing:

BASE_URL=https://test.example.com

USERNAME=testuser

PASSWORD=testpass

.env.production:

BASE_URL=https://www.example.com

USERNAME=produser

PASSWORD=prodpass

2.     У вашому тестовому файлі (наприклад, login.test.js) використовуйте dotenv:

require('dotenv').config({ path: `.env.${process.env.NODE_ENV}` });

const { test, expect } = require('@playwright/test');Це синтаксис модуля CommonJS, який зазвичай використовується в Node.js.

або: import { test, expect } from '@playwright/test'

Це сучасний синтаксис ES модулів, який стає стандартом для JavaScript (та кодових баз на основі TypeScript).

test('успішний вхід', async ({ page }) => {

  await page.goto(process.env.BASE_URL);

  await page.fill('#username', process.env.USERNAME);

  await page.fill('#password', process.env.PASSWORD);

  await page.click('#login-button');

  await expect(page.locator('.welcome-message')).toHaveText('Вітаємо у системі!');

});

3.     Запустіть тести, вказавши потрібне середовище:

NODE_ENV=development npx playwright test

Цей підхід дозволяє:

• легко перемикатися між різними середовищами без зміни коду тестів;
• зберігати конфіденційні дані (паролі, API-ключі) поза кодом;
• підтримувати DRY (Don't Repeat Yourself) принцип у ваших тестах.

Потім модифікуйте конфіг, додавши:

require('dotenv').config();

Тепер ви готові писати автоматизовані тести з використанням Playwright. Порівняно з налаштуванням Selenium, підготовка до Playwright Automation займає вдвічі менше часу та зусиль.

Після налаштування середовища розпочнімо створення нашого першого автоматизованого тесту. Playwright надає потужний API для взаємодії з браузером, що дозволяє імітувати реальну поведінку користувача.

Створення базового тесту з page.goto() і expect()

Розпочнемо з імпорту необхідних модулів та створення найпростішого тесту:

import { test, expect } from '@playwright/test';

test('базовий тест', async ({ page }) => {

  await page.goto('https://playwright.dev/');

  const title = page.locator('.navbar__inner .navbar__title');

  await expect(title).toHaveText('Playwright');

});

Цей тест виконує три основні дії:

• відкриває сторінку Playwright за допомогою page.goto();
• знаходить елемент заголовка за CSS-селектором;
• перевіряє, що текст заголовка відповідає очікуваному.

Для запуску тесту виконайте команду npx playwright test. За замовчуванням тести виконуються в безголовому режимі, тобто без відображення інтерфейсу браузера. Щоб бачити виконання тестів, додайте прапорець --headed. Або додайте в playwright.config.ts

const config: PlaywrightTestConfig = {

use: {

headless: false,

// Artifacts

screenshot: 'on',

video: 'on',

},

};

Перевірка елементів інтерфейсу: кнопки, заголовки, форми

Playwright пропонує різні способи взаємодії з елементами інтерфейсу:

test('перевірка інтерфейсу', async ({ page }) => {

  // Перехід на тестову сторінку

  await page.goto('https://demo.playwright.dev/todomvc');

  // Робота з формою введення

  const todoText = 'Вивчити Playwright';

  await page.getByPlaceholder('What needs to be done?').fill(todoText);

  await page.keyboard.press('Enter');

  // Перевірка доданого елемента

  await expect(page.getByTestId('todo-title')).toHaveText(todoText);

можна додати assertion message (це буде корисно в репортах):

expect(page.getByTestId('todo-title'), 'ToDo title should be valid').toHaveText(todoText);

  // Взаємодія з кнопкою

  await page.click('text=Clear completed');

});

У цьому прикладі ми використовуємо різні локатори для пошуку елементів:

• getByPlaceholder() — пошук за атрибутом placeholder;
• getByTestId() — пошук за спеціальним атрибутом data-testid;
• CSS-селектор з текстом — для пошуку кнопки.

Використання test.describe() для групування сценаріїв

Для організації тестів за логічними групами використовуйте test.describe():

test.describe('Група тестів форми логіну', () => {

  test('успішний логін', async ({ page }) => {

    await page.goto('https://example.com/login');

    await page.fill('#username', 'correctuser');

    await page.fill('#password', 'correctpassword');

    await page.click('#login');

    await expect(page).toHaveURL('https://example.com/dashboard');

  });

  test('неуспішний логін', async ({ page }) => {

    await page.goto('https://example.com/login');

    await page.fill('#username', 'wronguser');

    await page.fill('#password', 'wrongpassword');

    await page.click('#login');

    const errorMessage = await page.locator('.error-message');

    await expect(errorMessage).toBeVisible();

  });

});

Такий підхід робить тести більш структурованими та дозволяє використовувати спільні налаштування для групи. Наприклад, тести можна супроводжувати хуками test.beforeEach(), які виконуватимуться перед кожним тестом у групі.

При масштабуванні проєкту тестування ефективність та організація стають критично важливими факторами. Розгляньмо ключові підходи для оптимізації тестів з Playwright.

Використання test.step() для покрокового сканування

Метод test.step() дозволяє структурувати тести на логічні блоки, що значно полегшує аналіз результатів:

test('перевірка функціоналу', async ({ page }) => {

  await test.step('відкриття сторінки', async () => {

    await page.goto('https://example.com');

  });

  await test.step('заповнення форми', async () => {

    await page.fill('#email', '[email protected]');

    await page.fill('#password', 'password123');

  });

});

Додатково можна використовувати вкладені кроки, що особливо зручно для складних сценаріїв:

await test.step('Авторизація', async () => {

  await test.step('Введення даних', async () => {

    // код авторизації

  });

});

В цьому розділі розглянемо переваги Playwright в розрізі стабільності.

Тож по пунктах:

1. Автоматичне очікування. Playwright має вбудовані механізми автоматичного очікування, які «розуміють» стан DOM та мережеві запити. Наприклад, коли ви викликаєте page.click(), Playwright автоматично чекає, поки елемент не стане видимим, доступним для кліку та стабільним (тобто не рухається через анімацію).
2. Розумні селектори. Фреймворк пропонує потужну систему селекторів, яка дозволяє надійно ідентифікувати елементи навіть у динамічних інтерфейсах. Наприклад, селектор text=Submit знайде кнопку за її текстом, незалежно від структури DOM.
3. Гнучкі методи очікування. Playwright надає методи як waitForSelector(), waitForNavigation(), waitForLoadState(), які дозволяють точно контролювати, коли тест може продовжуватися після певних асинхронних дій.
4. Ізоляція контексту. Кожен тест виконується в ізольованому контексті браузера, що значно зменшує вплив попередніх тестів на наступні, підвищуючи стабільність виконання.
5. Перехоплення мережевих запитів. Можливість моніторингу та модифікації мережевих запитів дозволяє створювати більш передбачувані умови тестування, особливо для сценаріїв, що залежать від асинхронних API-викликів.
6. Налагодження та трасування. Playwright надає потужні інструменти для налагодження, включно з автоматичним створенням відео та скріншотів при падінні тестів, що значно полегшує аналіз нестабільних тестів.

Ці функції разом створюють середовище, де написання стабільних тестів для асинхронних вебдодатків стає значно простішим завданням. Інженери з автоматизації можуть зосередитися на логіці тестів, а не на боротьбі з таймінгами та нестабільними елементами інтерфейсу.

Підсумовуючи наше знайомство з Playwright, можна впевнено сказати, що цей інструмент дійсно змінює підхід до автоматизації тестування вебдодатків. Насамперед ви побачили, як швидко налаштувати середовище для тестування — лише за 10 хвилин. Однак це лише початок шляху до ефективної автоматизації.

Playwright, безсумнівно, надає перевагу порівняно з традиційними рішеннями завдяки:

• вбудованій підтримці сучасних браузерів;
• потужному API для взаємодії з елементами інтерфейсу;
• простій інтеграції з інструментами тестування доступності;
• можливості структурування та масштабування тестів для великих проєктів;
• вбудованим інструментам для візуального тестування, що дозволяють легко порівнювати знімки екрану та виявляти візуальні регресії;
• підтримці протоколу WebSocket, що дозволяє тестувати додатки з реальним часом оновлення даних;
• доступу до інструментів розробника (DevTools), що дає можливість глибокого аналізу продуктивності та налагодження.

Найважливіше — Playwright ефективно розв'язує проблеми асинхронного завантаження компонентів та стабільності виконання тестів, що часто стають каменем спотикання для інженерів з автоматизації тестування. Фактично, ця технологія допомагає долати обмеження, які раніше здавалися невіддільною частиною автоматизованого тестування.

Завдяки цим потужним функціям, Playwright не лише спрощує процес написання та підтримки тестів, але й відкриває нові можливості для забезпечення якості вебдодатків, дозволяючи створювати більш надійні, ефективні та всеосяжні тестові сценарії.

Таким чином, перехід від ручного до автоматизованого тестування з Playwright за 60 хвилин — це не просто реалістичний сценарій, а практичний шлях до вдосконалення процесів забезпечення якості. Тому настав час відкинути сумніви та почати впроваджувати цей інструмент у ваших проєктах, щоб відчути всі переваги автоматизації з Playwright на власному досвіді.