Playwright JavaScript – перший end-to-end тест

Playwright Test був створений спеціально для задоволення потреб end-to-end тестування. Playwright підтримує всі сучасні механізми візуалізації, включаючи Chromium, WebKit та Firefox. Можливість тестування у Windows, Linux та macOS, локально чи на CI, в режимі браузера без голови чи з головою.

В цій нотатці буде описано створення першого end-to-end тесту за допомогою Playwright та мови програмування JavaScript, починаючи від встановлення і до запуску тесту.

Встановлення Playwright

Попередньо створюю папку first_test та відкриваю її в середі розробки Visul Studio Code. Запускаю термінал:

Для встановлення та використання Playwright, потрібно мати попередньо встановлені Node та менеджер пакетів NPM (Встановлення Node.js та NPM на Windows). Встановлюю Playwright командою:

npm init playwright@latest

Під час виконання команди, потрібно обрати відповіді на запитання, що будуть поставлені установником для початкової конфігурації:

  • обрати що планується використовувати для написання тестів: TypeScript або JavaScript (за замовчуванням TypeScript, в моєму прикладі буде JavaScript)
  • назва папки для зберігання тестів (за замовчуванням це tests або e2e, залишаю як є)
  • додавання робочого процесу GitHub Actions, щоб легко запускати тести на CI (за замовчуванням false, залишаю як є)
  • встановлення підтримуваних Playwright браузерів (за замовчуванням true). Браузери можна встановити одразу, якщо обрати true, або пізніше за допомогою команди: npx playwright install

В результаті виконання команди, в папці first_test буде автоматично створено наступну структуру каталогів та файли:

  • tests та tests-examples містять вже написані приклади тестів, котрі можуть допомогти почати писати власні end-to-end тести
  • playwright.config.js – файл конфігурації, куди можна додати або змінити налаштування для тестів
  • package.json – описує необхідні залежності

Написання першого end-to-end тесту Playwright

В каталозі tests створюю файл demo.spec.js:

Сценарій тесту, котрий буде автоматизовано:

  1. Відкрити сторінку авторизації на демо сайті за адресою https://demoqa.com/login
  2. Ввести коректні дані користувача та натиснути кнопку Login
  3. Після авторизації, на сторінці профілю отримати username користувача та порівняти з тим, котрий було введено на сторінці авторизації

В файл demo.spec.js додаю код тесту:

const { test, expect } = require('@playwright/test');

test('login to demo site', async ({ page }) => {
    await page.goto('https://demoqa.com/login');

    let login = 'it-notes';
    await page.fill('#userName', login);
    await page.fill('#password', 'Aqa12345*');
    await page.click('#login');

    await expect(page.locator('#userName-value')).toHaveText(login);
  });

  • по перше потрібно імпортувати test та expect з модуля @playwright/test
  • функція test приймає два аргументи, перший – назва тесту, другий – анонімна функція, котрій в якості аргументу передається екземпляр page
  • page.goto – відкриває сторінку за вказаним URL
  • page – надає методи взаємодії зі сторінкою (fill – заповнення текстового поля, click – натискання кнопки). Обидва методи першим параметром приймають селектор елемента
  • expect – виконує в Playwright функцію test assertions. В моєму прикладі, expect в якості значення отримує page.locator, котрий буде пов’язано з елементом, що має відповідний селектор (відображення username користувача). Після цього йде виклик matcher toHaveText, з очікуваним текстом
  • page.locator – повертає локатор елемента, який можна використовувати для виконання дій на цій сторінці/фреймі. Локатор пов’язується з елементом, безпосередньо перед виконанням дії над цим елементом
  • toHaveText – Playwtight буде повторно перевіряти елемент на наявність очікуваного тексту, доки він не з’явиться в елементі, або ж до закінчення тайм-ауту (за замовчуванням 5 секунд)
  • async та await – використовуються оскільки JavaScript є асинхронним (намагається запустити кілька кроків одночасно, незалежно від послідовності). Щоб уникнути цього, слід використовувати await. Потрібно дочекатися успішного виконання одного кроку, перш ніж запускати інший (інакше тести можуть працювати некоректно)

Запуск тесту Playwright

Запустити тести можна за допомогою команди:

npx playwright test

Вона запустить тести в усіх браузерах, що налаштовані у файлі playwright.config.js:

За замовчуванням тести виконуються в headless (безголовому) режимі, тобто вікна браузера не відкриваються під час виконання тестів, а результат відображатиметься в терміналі.

Для запуску свого тестового прикладу, перебуваючи в каталозі з файлом що містить тест, я виконую команду з наступними налаштуваннями:

npx playwright test demo.spec.js --headed --project=chromium

  • в якості аргументу передано назву файлу з тестом demo.spec.js
  • headed – додається для запуску тестів в візуальному режимі браузера
  • project=chromium – тест буде запущено лише в браузері chromium

Результат виконання тесту:

Перегляд HTML звіту результатів виконання тестів

HTML Reporter показує звіт про результати виконання тестів, дозволяючи фільтрувати звіт за браузерами, пройденими/невдалими/пропущеними/нестабільними тестами. За замовчуванням HTML-звіт відкривається автоматично, якщо деякі з тестів не проходять. В іншому випадку звіт можна відкрити за допомогою наступної команди:

npx playwright show-report

Звіт для мого прикладу має наступний вигляд:

Мітки: