@astral/e2e-helpers

Пакет с утилитами для E2E-тестирования помощью Playwright. Предоставляет набор утилит для упрощения написания и поддержки e2e тестов.

Table of contents

• Description
• Installation
• Actions
  • clickButton
  • clickTextFieldAndFill
  • selectAsyncAutocomplete
  • uploadPreviewUploaderFile
• Helpers
  • expectNotification
• Services
  • Logger

Description

Этот пакет предоставляет:

• actions - экшены, описывающие логику взаимодействия с компонентами ui-kit
• helpers - хелперы для использования в e2 тестах
• services - сервисы, использующиеся в e2e тестировании

Installation

Пакет необходимо установить как зависимость для разработки:

npm install @astral/e2e-helpers --save-dev

Также убедитесь, что у вас установлены playwright и @playwright/test.

Actions

Action - утилита, описывающая юзер-флоу взаимодействия с компонентами ui-kit

clickButton

• Ищет кнопку в переданном locator или на всей странице
• Кликает по ней

import { clickButton } from '@astral/e2e-helpers';


test('...', async ({ page }) => {
    await clickButton(page, { name: 'Далее' }); 
    
    await clickButton(page, { name: 'Далее', locator : page.getByRole('dialog') }); 
});

clickTextFieldAndFill

• Ищет TextField в переданном locator или на всей странице по name
• Кликает по нему
• Устанавливает значение value

import { clickTextFieldAndFill } from '@astral/e2e-helpers';


test('...', async ({ page }) => {
    await clickTextFieldAndFill(page, { name: 'Фамилия', value : 'Иванов' });
    
    await clickTextFieldAndFill(page, {
        name: 'Фамилия',
        value: 'Иванов',
        locator: page.getByRole('dialog'),
    });
});

selectAsyncAutocomplete

• Ищет Select в переданном locator или на всей странице по name
• Кликает по нему
• Устанавливает значение value
• Ждет пока автокомплит предложит option в котором будет target
• Кликает по найденному option

import { selectAsyncAutocomplete } from '@astral/e2e-helpers';


test('...', async ({ page }) => {
    await selectAsyncAutocomplete(page, {
        name: 'Организация',
        value: 'Астр',
        target: 'ООО Астрал-Софт',
    });

    await selectAsyncAutocomplete(page, {
        name: 'Организация',
        value: 'Астр',
        target: 'ООО Астрал-Софт',
        locator: page.getByRole('dialog'),
    });
});

uploadPreviewUploaderFile

• Ищет PreviewUploader по его label, в locator или на всей странице
• Находит в нем кнопку "Загрузить" и кликает по ней
• Устанавливает filePath в uploader
• Ждет файл загрузится
• Проверяет, что загрузка закончилась успешно

import { uploadPreviewUploaderFile } from '@astral/e2e-helpers';


test('...', async ({ page }) => {
    const PASSPORT_FIXTURE_PATH = path.join(
        __dirname,
        '../fixtures',
        'passport-jpg-fixture.jpg',
    );

    await uploadPreviewUploaderFile(page, {
        locator: page.getByRole('dialog'),
        filePath: PASSPORT_FIXTURE_PATH,
    });
});

Helpers

Helper - хелперы для использования в e2 тестах

expectNotification

• Проверяет появление уведомления Notification по notificationText на странице

import { expectNotification } from '@astral/e2e-helpers';


test('...', async ({ page }) => {
    await expectNotification(
        'Сертификат подписан и отправлен в обработку',
    );
});

Services

Services - сервисы для e2e тестирования

Logger

Логер для вывода сообщений в консоль. Разделение по цветам актуально в контексте вывода в консоли CI/CD пайплайна (например, GitLab), чтобы визуально отделить логи теста от логов Job`а.

import {e2eLogger} from '@astral/e2e-helpers';


test('...', async ({page}) => {
    e2eLogger.msg('Обычное сообщение'); //Стандартное сообщение изумрудного цвета

    e2eLogger.success('Успех'); // Сообщение об успехе зеленого цвета

    e2eLogger.info('Внимание'); // Предупреждающее сообщение желтого цвета

    e2eLogger.error(`Ошибка ${errorMsg}`); // Сообщение об ошибке красного цвета

    e2eLogger.wait(`60 сек.`); // Сообщение о начале ожидания - 🕐 Ожидание: 60 сек.
});