Playwright и Allure как хорошая практика для разработки веб-приложения / Habr

Привет, меня зовут Иван. Я фронтенд-разработчик из Clevertec в команде, которая создаёт веб-версию приложения для крупного банка. В этой статье я расскажу, почему мы используем Playwright в сочетании с Allure для автоматизации тестирования и оптимизации работы команды.

Разработчики вынуждены вечно искать баланс: как выпускать фичи быстро, качественно и желательно небольшой командой. Наш рабочий рецепт – это фронты + E2E-тесты.

Результаты такие: сейчас в сутки мы прогоняем порядка 1000 автотестов. Чтобы справиться с таким объёмом вручную, пришлось бы завести в команду 15 тестировщиков. Но у нас их двое. И качество приложения от этого не страдает.

Почему мы выбрали Playwright?

E2E-тесты проверяют, как весь стек приложения работает вместе в реальной среде. Они имитируют действия конечного пользователя: нажатие кнопок, заполнение форм, навигацию по страницам и проверку содержимого.

Playwright предоставляет API для автоматизации действий в браузере. Он предлагает удобный способ создания и запуска E2E-тестов, благодаря поддержке браузеров Chromium, Firefox и WebKit, а также поддержке нескольких языков программирования: JavaScript, TypeScript, Python и других.

А ещё это простой и эффективный способ тестирования веб-приложений, которые построены на платформе React – это наш случай.

Вот несколько ключевых моментов, которые я бы подчеркнул исходя из своей практики:

Выбор элементов. Playwright предоставляет удобные методы для выбора элементов на странице: CSS-селекторы, XPath или встроенные методы Playwright. Это упрощает процесс тестирования React-компонентов.
Интерактивные действия. Можно эмулировать различные пользовательские действия: клики, ввод текста и наведение курсора. Это особенно полезно при тестировании интерактивных элементов – кнопок и форм.
Ожидания и асинхронные операции. Мощные механизмы ожидания waitFor синхронизируют выполнение тестов с динамическими изменениями страницы. Это особенно важно для тестирования React-приложений из-за их асинхронной природы.
Тестирование маршрутизации. Позволяет эмулировать переходы по маршрутам и проверять корректность отображения соответствующих компонентов при изменении URL для тестирования навигации.
Проверка состояния React-компонентов, включая их свойства, состояния и внутренний контент, помогает убедиться, что компоненты отображаются правильно и соответствуют ожиданиям.
Интеграция с тестовыми фреймворками Jest, Mocha или Jasmine позволяет писать и запускать тесты React-приложений в привычной среде разработки.

Эти возможности помогают обеспечить стабильность и надежность нашего веб-приложения.

Стартовые настройки Playwright и интеграция с Allure

Установка Playwright: npm install @playwright/test

playwright.config:

Импортируем нужные модули и функции из библиотек:

import { devices, defineConfig } from '@playwright/test';
import { getConfig } from 'testall-playwright';
import { testPlanFilter } from 'allure-playwright/dist/testplan';

Определяем конфигурацию тестов с помощью defineConfig. Внутри используем getConfig для получения конфигурации:

export default defineConfig(
  getConfig({
    fullyParallel: true,
    forbidOnly: !!process.env.CI,
    retries: process.env.CI ? 2 : 0,
    workers: 7,
    reporter: [
      ['html', { open: 'never' }],
      ['list'],
      [
        'allure-playwright',
        {
          environmentInfo: {
            E2E_NODE_VERSION: process.version,
            E2E_OS: process.platform
          },
          suiteTitle: false,
          detail: false
        }
      ]
    ],
    use: {
      headless: true,
      trace: 'retain-on-failure',
      video: 'retain-on-failure',
      screenshot: 'only-on-failure',
      ignoreHTTPSErrors: true
    },

Поля настройки тестов по коду выше:

fullyParallel: Включить ли полное параллельное выполнение тестов.
forbidOnly: Запрещает использование only в тестах, если переменная окружения CI установлена.
retries: Количество повторных попыток выполнения тестов в случае неудачи.
workers: Количество параллельных рабочих процессов для выполнения тестов.
reporter: Настройки для отчетов о тестах, включая форматы отчетов и их настройки.
use: Настройки для запуска тестов, такие как headless-режим, запись видео, сохранение скриншотов и т.д.

Определяем проекты для тестирования, каждый со своими настройками:

name: Название проекта.
timeout: Максимальное время выполнения проекта.
expect: Ожидаемые результаты.
testDir: Директория с тестами.
snapshotDir: Директория для хранения снимков экрана.
use: Дополнительные настройки, такие как базовый URL, время ожидания навигации и действий.

 projects: [
      {
        name: ProjectName,
        timeout: 180 * 1000,
        expect: {
          timeout: 15 * 1000,
          toHaveScreenshot: { maxDiffPixels: 200 }
        },
        testDir: './web/tests/mock',
        snapshotDir: './web/resources/snapshots/desktop',
        // testIgnore: '**/mobile/**',
        use: {
          baseURL: process.env.BASE_URL,
          navigationTimeout: 60 * 1000,
          actionTimeout: 45 * 1000,
          ...devices['Desktop Chrome']
        }
      }
],

Используем testPlanFilter для настройки фильтрации тестов по плану выполнения:

 grep: testPlanFilter()
  })
);

Функция testPlanFilter используется для фильтрации тестов в зависимости от их атрибутов или метаданных. Она предназначена для использования с библиотекой allure-playwright, которая интегрирует отчёты в стиле Allure с фреймворком Playwright.

Так же для интеграции с Allure выполните команду: npm install @playwright/test allure-playwright

Пример написания тестов с внутренними настройками

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

// Определение набора тестов для функции 'название обычно совпадает с suite'
test.describe('название обычно совпадает с suite', () => {
  
  // Перед каждым тестом выполняем следующие шаги настройки
  test.beforeEach(async () => {
    
    // Установка метаданных для отчета Allure
    allure.owner(Тестировщик);
    allure.feature(берется из Allure поле feature);
    allure.epic(берется из Allure поле epic);
    allure.suite(берется из Allure поле suite);
    
    // Дополнительные метки Allure для теста
    allure.labels(  
      { name: 'Developer', value: 'Разработчик' },
      { name: 'layer', value: 'UI Tests' } // Уровень: UI Тесты
    );
    allure.tag('UI');


    // Определение тестов, которые будут запускаться 
при каждом отдельном тестовом случае
  });


  // Определение отдельного тестового случая с конкретным идентификатором Allure
  test('Название теста @allure.id=номер', async () => {
    // Примеры проверки шагов функционала:
    // Проверка функциональности кнопки 
    // Проверка наличия панели
    // Проверка отображения списка
});

Объяснение кода

test.describe: Определяет набор тестов. Название обычно совпадает с названием функции или модуля, который тестируется.
test.beforeEach: Выполняет указанные шаги перед каждым тестом. Здесь устанавливаются метаданные для отчета Allure.
- allure.owner: Указывает тестировщика написавшего тест.
- allure.feature: Указывает функциональную область, к которой относится тест.
- allure.epic: Указывает задачу, связанную с тестом.
- allure.suite: Определяет группу тестов.
- allure.labels: Добавляет дополнительные метки для классификации тестов.
- allure.tag: Добавляет теги для тестов.
test: Определяет отдельный тестовый случай.

Название теста включает уникальный идентификатор для Allure (@allure.id=номер).

Визуализируем результаты тестов с Allure

В работе совместно с Playwright мы используем Allure – фреймворк для создания красивых и информативных отчетов о результатах тестирования. Отчеты содержат информацию о прохождении тестов, скриншоты ошибок, логи, параметры тестов и многое другое. Благодаря интерактивному веб-интерфейсу их удобно просматривать и анализировать.

В нашем проекте команда тестирования создает пошаговую инструкцию в Allure, которая разбита на папки и разделы. Разработчики следуют этим инструкциям, создавая соответствующие тесты.

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

Команда разработчиков и тестирования использует эти отчеты для анализа результатов тестирования. При обнаружении проблем принимаем меры: исправляем дефекты в коде, оптимизируем функциональность или добавляем новые тесты для покрытия новых сценариев использования.

Преимущества использования Allure:

Информативные отчеты, которые легко читать и понимать.
Интерактивный веб-интерфейс с возможностью фильтрации и сортировки данных.
Поддержка разных языков программирования, включая Java, JavaScript, Python и другие.
Интеграция с различными фреймворками тестирования: JUnit, TestNG, pytest и другими.
Многофункциональность: доступно добавление скриншотов ошибок, логов, параметров тестов и другой полезной информации в отчеты.

Итоги: бонусы подхода для команды и заказчика

Автоматизированное тестирование – это способ не тратить ресурсы команды на рутинные задачи и очень быстро обнаруживать ошибки, при этом перераспределяя силы тестировщиков на на более стратегически важные задачи: проектирование тестовых сценариев или анализ результатов. Это важно, потому что мы работаем по спринтам и дважды в неделю отчитываемся о результатах перед заказчиком.

В целом с таким подходом мы быстрее выпускаем новые фичи и постоянно улучшаем качество продукта. А быстрый, предсказуемый и качественный результат – это отличная опция для заказчика.

Если после прочтения статьи у вас остались вопросы, отвечу на них в комментариях.