Вступ

Представляючи світ «Використання ланцюжкових функцій для автоматизованого тестування з Playwright і TypeScript», ми починаємо подорож, щоб ще більше покращити ваші навички автоматизованого тестування. Як розширення раніше дослідженого шаблону PageObject, ця тема пропонує потужний і ефективний спосіб оптимізувати ваші процеси тестування. У цьому вичерпному посібнику ми зануримося в концепцію зв’язування функцій на основі модульних тестів автоматизації, які можна підтримувати. Цей підхід у поєднанні з шаблоном PageObject не тільки зробить ваші тести більш читабельними, але й значно підвищить їх ефективність.

Дивіться попередню тему

У нашому попередньому дослідженні ми дізналися, як шаблон PageObject може трансформувати структуру та організацію автоматизованих тестів шляхом абстрагування інтерфейсів користувача на окремі класи, що призводить до чистішого та більш модульного тестового коду. Тепер давайте зробимо наступний крок, ввівши концепцію «ланцюжкових функцій». Зв’язані функції забезпечують засоби для виконання кілька послідовних дій над веб-елементами, що спрощує взаємодію та оптимізує читабельність ваших тестових сценаріїв. Він пропонує динамічний спосіб навігації різними діями, необхідними для тестування вашої програми.

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

Давайте плавно перейдемо від шаблону PageObject до світу зв’язаних функцій, спираючись на основу, закладену в нашому попередньому обговоренні. Разом ми опануємо мистецтво створення ефективних і добре структурованих автоматизованих тестів за допомогою Playwright і TypeScript. 🚀

Крок 1: Клас Control

У вашому проекті Playwright створіть клас Control у новому файлі ./src/control/control.ts.

import { Locator, Page } from '@playwright/test';

class Control {
    private readonly locator: Locator;

    constructor (private readonly selector: string, private readonly page: Page) {
        this.locator = this.page.locator(this.selector);
    }
}

export default Control;

Цей клас буде інкапсулювати методи для взаємодії з веб-елементами за допомогою об’єктів Playwright's Locator і Page.

Ви можете виконувати такі дії, як клацання, заповнення полів введення, очищення полів введення та натискання клавіш у цьому класі, а також багато інших дій, які вам потрібні. Давайте додамо деякі з них до нашого класу Control:

import { Locator, Page } from '@playwright/test';

class Control {
    private readonly locator: Locator;

    constructor (private readonly selector: string, private readonly page: Page) {
        this.locator = this.page.locator(this.selector);
    }

    click = async (): Promise<Control> => {
        await this.locator.click();
        return this;
    }

    fill = async (value: string): Promise<Control> => {
        await this.locator.fill(value);
        return this;
    }

    clear = async (): Promise<Control> => {
        await this.locator.clear();
        return this;
    }

    press = async (key: string): Promise<Control> => {
        await this.locator.press(key);
        return this
    }

    getInputValue = (): Promise<string> => this.locator.inputValue();
}

export default Control;

У цьому класі ви визначаєте методи для типових дій, таких як клацання, заповнення, очищення та натискання. Кожен метод повертає екземпляр класу Control, що дозволяє об’єднувати дії разом.

Крок 2: Використання Control

Тепер інтегруйте клас Control у свій клас PageObject, який представляє певний елемент або частину вашої веб-програми. У своєму класі PageObject створіть екземпляри класу Control для елементів, з якими ви хочете взаємодіяти.

import { Page } from "@playwright/test";
import Control from "../../../control/control";

export class TodoApp {
    public readonly newTodoInput: Control = new Control('header > input', this.page);

    constructor (private readonly page: Page) {}
}

export default TodoApp;

У цьому прикладі ми створюємо властивість newTodoInput у класі TodoApp, використовуючи клас Control для поля введення, куди можна додавати нові завдання. Це дозволяє вам легко взаємодіяти з цим елементом у ваших тестах.

Крок 3: Написання тесту

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

import test, { expect } from './fixtures/fixture';

test.describe('add todo item with chained approach', () => {  
    test('add todo item with chained functions', async ({ todoPage }) => {
        const newTodoItem = 'chainedTodoItem';
        const todo = todoPage.todoApp.newTodoInput;

        await todo
            .fill(newTodoItem)
            .then(() => todo.clear())
            .then(() => todo.fill(newTodoItem))
            .then(() => todo.press('Enter'));

        const leftTodoItems = await todoPage.todoApp.getLeftTodoItems();
        expect(leftTodoItems).toBe(1);
    });
});

У цьому тесті ви створюєте екземпляр класу Control для поля введення. Використовуючи цей екземпляр, ви можете ланцюжок дій, як-от заповнення поля введення, його очищення, заповнення знову та, нарешті, натискання клавіші Enter. Такий підхід спрощує тестовий код і робить його більш читабельним.

Крок 4: Запуск тесту

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

Тепер ви можете запустити свої перші тести за допомогою такої команди:

npx playwright test

Ця команда виконає ваші тести Playwright на основі конфігурації, яку ви встановили у файлі playwright.config.ts.

Running 5 tests using 1 worker
5 passed (12.5s)

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

Висновок

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

Переваги

1. Покращена читабельність коду: ланцюгові функції дозволяють виражати послідовність дій над веб-елементом більш інтуїтивно зрозумілим і читабельним способом. Етапи тестування представлені чітко та організовано.
2. Зменшення коду: ланцюжком дій над одним елементом можна значно зменшити дублювання коду. Це робить ваші тестові сценарії коротшими та лаконічнішими.
3. Модульність: ланцюгові функції спрощують інкапсуляцію та повторне використання логіки взаємодії. Ви можете створювати багаторазові методи або класи Page Object, які надають плавні та легкі в обслуговуванні інтерфейси для веб-елементів.
4. Легке налагодження: якщо тест не вдається, визначити проблему стає простіше, оскільки помилка зазвичай пов’язана з певною зв’язаною функцією. Це прискорює налагодження та усунення несправностей.
5. Зменшені відступи: зв’язані функції часто призводять до менших відступів у вашому тестовому коді, що може покращити розбірливість коду.

Недоліки

1. Обмежене паралельне виконання: з’єднання функцій для одного елемента може не працювати належним чином, якщо вам потрібно виконувати одночасні дії з різними елементами або паралельні взаємодії. У таких випадках вам може знадобитися розірвати ланцюжок і написати окремі рядки коду.
2. Складні сценарії: для складних сценаріїв тестування з кількома елементами та взаємозалежними діями ланцюжок може стати заплутаним. Можливо, було б корисніше розділити дії та забезпечити ясність за допомогою окремих рядків коду.
3. Обмежена обробка помилок: обробка помилок у зв’язаних функціях може бути складною. Якщо дія в ланцюжку завершується невдало, може бути важко грамотно впоратися з цією конкретною помилкою.
4. Крива навчання: підхід із ланцюжковими функціями може потребувати кривої навчання для членів команди, які вперше знайомляться з цим стилем написання тестових сценаріїв. Належне навчання та документація важливі для забезпечення ефективного використання.
5. Проблеми обслуговування: надмірне використання ланцюжків для кожної взаємодії може призвести до надто складного коду, який стає складним для підтримки та оновлення в міру розвитку програми. Важливо знайти баланс між читабельністю та зручністю обслуговування.

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

Ресурси

• [1] повне репо з кодом;
• [2] об’єкт сторінки шаблон;
• [3] драматург документація;

---

У наступній темі ми розглянемо, як використовувати підхід каналу з fp-ts для створення функцій і покращення зручності обслуговування та читабельності тестів автоматизації Playwright.

fp-ts, або функціональне програмування для TypeScript, — це бібліотека, яка передає принципи функціонального програмування в TypeScript. Він пропонує інструменти для написання коду, який є більш передбачуваним, складним і лаконічним.