Привет, меня зовут Иван. Я фронтенд-разработчик из 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 и другими.
Многофункциональность: доступно добавление скриншотов ошибок, логов, параметров тестов и другой полезной информации в отчеты.
Итоги: бонусы подхода для команды и заказчика
Автоматизированное тестирование – это способ не тратить ресурсы команды на рутинные задачи и очень быстро обнаруживать ошибки, при этом перераспределяя силы тестировщиков на на более стратегически важные задачи: проектирование тестовых сценариев или анализ результатов. Это важно, потому что мы работаем по спринтам и дважды в неделю отчитываемся о результатах перед заказчиком.
В целом с таким подходом мы быстрее выпускаем новые фичи и постоянно улучшаем качество продукта. А быстрый, предсказуемый и качественный результат – это отличная опция для заказчика.
Если после прочтения статьи у вас остались вопросы, отвечу на них в комментариях.