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

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

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

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

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

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

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

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

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

1. Выбор элементов. Playwright предоставляет удобные методы для выбора элементов на странице: CSS-селекторы, XPath или встроенные методы Playwright. Это упрощает процесс тестирования React-компонентов.

2. Интерактивные действия. Можно эмулировать различные пользовательские действия: клики, ввод текста и наведение курсора. Это особенно полезно при тестировании интерактивных элементов – кнопок и форм.

3. Ожидания и асинхронные операции. Мощные механизмы ожидания waitFor синхронизируют выполнение тестов с динамическими изменениями страницы. Это особенно важно для тестирования React-приложений из-за их асинхронной природы.

4. Тестирование маршрутизации. Позволяет эмулировать переходы по маршрутам и проверять корректность отображения соответствующих компонентов при изменении URL для тестирования навигации.

5. Проверка состояния React-компонентов, включая их свойства, состояния и внутренний контент, помогает убедиться, что компоненты отображаются правильно и соответствуют ожиданиям.

6. Интеграция с тестовыми фреймворками Jest, Mocha или Jasmine позволяет писать и запускать тесты React-приложений в привычной среде разработки.

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

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

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

playwright.config:

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

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

2. Определяем конфигурацию тестов с помощью 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-режим, запись видео, сохранение скриншотов и т.д.

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

• 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']         }       } ],

4. Используем 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:

1. Информативные отчеты, которые легко читать и понимать.

2. Интерактивный веб-интерфейс с возможностью фильтрации и сортировки данных.

3. Поддержка разных языков программирования, включая Java, JavaScript, Python и другие.

4. Интеграция с различными фреймворками тестирования: JUnit, TestNG, pytest и другими.

5. Многофункциональность: доступно добавление скриншотов ошибок, логов, параметров тестов и другой полезной информации в отчеты.

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

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

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

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