Швидкий старт: Налаштування проекту Playwright з TypeScript та Cucumber для автоматизації UI тестування - javascript.org.ua

Автоматизація UI тестів (UI tests) може здатися складним завданням, але з правильними інструментами та налаштуванням цей процес стає безперебійним. У цьому посібнику ми розглянемо налаштування проекту за допомогою Playwright, TypeScript та Cucumber (BDD) для створення потужної системи тестування UI. Також ми покриємо генерування HTML звітів та додавання скріншотів для кращих інсайтів тестування.

Необхідні умови

Переконайтесь, що на вашій системі встановлено наступне:

Node.js (рекомендована LTS версія)
Редактор коду (наприклад, VS Code або IntelliJ IDEA)

Крок 1: Ініціалізація вашого проекту

Створіть нову директорію для проекту:

mkdir playwright-cucumber-project && cd playwright-cucumber-project

Ініціалізуйте файл package.json:

npm init -y

Крок 2: Встановлення залежностей

Встановіть необхідні пакети:

npm install playwright @playwright/test typescript ts-node cucumber @cucumber/cucumber @cucumber/pretty-formatter

Крок 3: Налаштування TypeScript

Створіть файл tsconfig.json у кореневій директорії проекту з таким вмістом:

{  
 "compilerOptions": {  
 "target": "ES2020",  
 "module": "CommonJS",  
 "strict": true,  
 "esModuleInterop": true,  
 "skipLibCheck": true,  
 "outDir": "dist",  
 "rootDir": "src",  
 },  
 "include": ["src/**/*.ts"],  
 "exclude": ["node_modules"]  
}

Крок 4: Налаштування Cucumber з Playwright

Створіть структуру папок: mkdir -p src/{features,steps}
Створіть файл з прикладом функціональності src/features/playwright-dev-ui.features з таким вмістом:

Feature: Playwright Dev UI feature  

 Scenario: Open Playwright website and check the title  
 Given I open the Playwright website  
 Then the title should be "Fast and reliable end-to-end testing for modern web apps | Playwright"  

 Scenario: Check the Playwright logo is visible  
 Given I open the Playwright website  
 Then the Playwright logo should be visible  

 Scenario: Navigate to the Get Started page  
 Given I open the Playwright website  
 When I click on the "Get started" link  
 Then I should be on the "Installation | Playwright" page  

 Scenario: Search for a topic  
 Given I open the Playwright website  
 When I search for "test generator"  
 Then I should see search results for "test generator"  

 Scenario Outline: Navigate to the Get Started page  
 Given I open the Playwright website  
 When I click on the "" link  
 Then I should be on the "" page  

 Examples:  
 | linkText | pageTitle |  
 | Get started | Installation \| Playwright |  
 | Docs | Installation \| Playwright |  

 Scenario Outline: Search for a topic  
 Given I open the Playwright website  
 When I search for ""  
 Then I should see search results for ""  

 Examples:  
 | searchTerm |  
 | test generator |  
 | browser context |

Створіть приклад визначень кроків `src/features/playwright-dev-ui.steps.ts` з таким вмістом:

import {Given, When, Then, After} from "@cucumber/cucumber";
import { expect } from "@playwright/test";
import { chromium, Browser, Page } from "playwright";
import { Status } from "@cucumber/cucumber";
import fs from 'fs';

let browser: Browser;
let page: Page;
const headless = process.env.HEADLESS_MODE !== 'false';
const slowMoValue = headless ? 0 : 1000;

Given('I open the Playwright website', async function () {
const baseUrl = this.parameters.baseUrl;
browser = await chromium.launch({ headless , slowMo: slowMoValue });
page = await browser.newPage();
await page.goto(baseUrl);
});

Then('the title should be {string}', async function (expectedTitle: string) {
const title = await page.title();
expect(title).toBe(expectedTitle);
await browser.close();
});

Then('the Playwright logo should be visible', async function () {
const logo = await page.waitForSelector('img[alt="Playwright logo"]', { state: 'visible' });
expect(logo).not.toBeNull();
await browser.close();
})

When('I click on the {string} link', async function (linkText: string) {
await page.getByRole('link', { name: linkText }).click();
await page.waitForLoadState('networkidle');
});

Then('I should be on the {string} page', async function (pageTitle: string) {
const title = await page.title();
expect(title).toContain(pageTitle);
await browser.close();
});

When('I search for {string}', async function (searchTerm: string) {
await page.getByLabel('Search (Command+K)').click();
await page.getByPlaceholder('Search docs').fill(searchTerm);
});

Then('I should see search results for {string}', async function (searchTerm: string) {
expect(page.getByRole('link', {name: searchTerm})).not.toBeNull();
await browser.close();
});

After(async function (scenario) {
if (scenario.result?.status === Status.FAILED) {
const screenshot = await page.screenshot({ path: screenshots/${scenario.pickle.name}.png, fullPage: true });
const image = fs.readFileSync(screenshots/${scenario.pickle.name}.png);
this.attach(image, 'image/png');
}
await browser.close();
});
```

Крок 5: Налаштування Cucumber з красивими звітами

Створіть файл cucumber.js в кореневій директорії проекту з таким вмістом:

module.exports = {  
 default: {  
 paths: ['src/features/**/*.feature'],  
 require: ['src/steps/**/*.ts'],  
 requireModule: ['ts-node/register'],  
 format: ["progress", "json:reports/cucumber_report.json", '@cucumber/pretty-formatter', 'html:reports/cucumber-report.html'],  
 failFast: true,  
 worldParameters: {  
 baseUrl: 'https://playwright.dev',  
 }  
 }  
}

Крок 6: Додати скрипт для запуску тестів

Додайте тестовий скрипт у package.json для запуску тестів з файлом конфігурації cucumber

"scripts": {  
 "test": "cucumber-js --config cucumber.js"  
 }

Повний вигляд файлу package.json виглядатиме приблизно так:

{  
 "name": "playwright-cucumber-project",  
 "version": "1.0.0",  
 "main": "index.js",  
 "type": "commonjs",  
 "scripts": {  
 "test": "cucumber-js --config cucumber.js"  
 },  
 "keywords": [],  
 "author": "",  
 "license": "ISC",  
 "description": "",  
 "dependencies": {  
 "@cucumber/cucumber": "^11.2.0",  
 "@cucumber/pretty-formatter": "^1.0.1",  
 "@playwright/test": "^1.49.1",  
 "playwright": "^1.49.1",  
 "ts-node": "^10.9.2",  
 "typescript": "^5.7.3"  
 }  
}

Крок 7: Запуск тестів

Запустіть тести за допомогою npm test з кореня директорії.

Якщо хочете спостерігати за виконанням в браузері, можна налаштувати export HEADLESS=false

Крок 8: Перевірка налаштувань зі скріншотами та звітами

Після запуску тестів відкрийте файл reports/cucumber-report.html в браузері для перегляду детального звіту.
2.
Ви можете змінити один із тестів, щоб навмисно спричинити його невдачу, аби перевірити, що скріншоти невдалих тестів зберігаються в папці screenshots.

Приклад структури проекту:

playwright-cucumber-project/  
├── src/  
│ ├── features/  
│ │ └── playwright-dev-ui.feature  
│ ├── steps/  
│ │ └── playwright-dev-ui.steps.ts  
│ └── support/  
┌── cucumber.js  
┌── package.json  
┌── tsconfig.json  
┌── reports/  
┌── screenshots/

Приклад HTML звіту:

Переваги використання Cucumber замість простого Playwright

Використання Cucumber разом з Playwright має кілька переваг, особливо для команд і проектів, що акцентують увагу на співпраці та прозорості:

Відповідність практиці Behavior Driven Development (BDD):

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

2. Покращена читаність та підтримуваність тестів:

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

3. Спільна робота:

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

4. Повторне використання кроків:

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

5. Покращене налагодження за допомогою докладних звітів:

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

6. Масштабованість для більших проектів:

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

Висновок

Тепер у вас є повністю налаштована система автоматизації тестування UI на основі Playwright-Typescript-Cucumber. Включення HTML звітів і скріншотів забезпечує покращене налагодження та кращі інсайти під час тестування. Використання Cucumber для BDD гарантує чітке, спільне та масштабоване управління тестами. Успішного тестування!

Перекладено з: Quick Start Guide: Setting Up a Playwright Project with TypeScript and Cucumber for UI Test Automation