Настройка окружения для компонентных тестов

Компонентные тесты играют ключевую роль в процессе разработки, обеспечивая проверку отдельных частей системы, например, пользовательских интерфейсов, бизнес-логики и API, в изоляции от остальной части приложения. Playwright предоставляет мощные инструменты для тестирования веб-компонентов с использованием JavaScript. Для эффективного тестирования необходимо правильно настроить окружение, что включает в себя установку зависимостей, конфигурацию тестов и подготовку тестовых данных.

Установка Playwright

Для начала работы с Playwright требуется установить необходимые пакеты. Установка выполняется с помощью Node.js и npm (или yarn, если предпочтительнее).

  1. Инициализация проекта:

    npm init -y

  2. Установка Playwright:

    npm install playwright

  3. Установка браузеров для тестирования: Playwright поддерживает несколько браузеров: Chromium, Firefox и WebKit. Для начала работы нужно установить их:

    npx playwright install

  4. Установка дополнительных зависимостей (например, для тестирования в CI/CD): В некоторых случаях, особенно при работе с CI/CD, могут потребоваться дополнительные библиотеки:

    npm install @playwright/test

Структура проекта

Правильная структура проекта способствует удобному написанию, поддержке и масштабированию тестов. Рекомендуемая структура для Playwright выглядит следующим образом:

/project-root
  /tests
    /component
      login.spec.js
      header.spec.js
      footer.spec.js
  /pages
    login.page.js
    header.page.js
  /utils
    helper.js
  package.json
  playwright.config.js
  • /tests/component: Каталог для тестов отдельных компонентов, например, формы авторизации или меню.
  • /pages: Страница, которая инкапсулирует логику взаимодействия с элементами компонента.
  • /utils: Утилиты для повторного использования (например, функции для работы с API, обработки данных или утилиты для управления сессиями).
  • playwright.config.js: Конфигурационный файл для Playwright, содержащий глобальные настройки тестов.

Конфигурация Playwright

Для работы с Playwright в проекте необходимо создать конфигурационный файл playwright.config.js. Он управляет настройками для выполнения тестов, такими как настройки браузера, время ожидания элементов, режим выполнения тестов и другие параметры.

Пример базовой конфигурации:

const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  timeout: 30000, // максимальное время ожидания для каждого теста
  use: {
    headless: true, // безголовый режим (по умолчанию true)
    browserName: 'chromium', // используемый браузер (chromium, firefox, webkit)
    baseURL: 'https://example.com', // базовый URL для всех тестов
  },
  projects: [
    {
      name: 'component-tests',
      testMatch: /.*\.spec\.js$/, // шаблон для поиска тестовых файлов
    },
  ],
});

Здесь задаются базовые параметры, такие как время ожидания тестов, базовый URL, браузер по умолчанию и другие настройки.

Структура теста для компонента

Для начала написания компонентного теста необходимо создать файл, например, login.spec.js в каталоге /tests/component. В этом файле будет описан тест для конкретного компонента (например, формы логина).

Пример теста:

const { test, expect } = require('@playwright/test');

test('Проверка корректности формы логина', async ({ page }) => {
  // Открытие страницы
  await page.goto('/login');

  // Поиск элементов формы
  const usernameField = await page.locator('input[name="username"]');
  const passwordField = await page.locator('input[name="password"]');
  const submitButton = await page.locator('button[type="submit"]');

  // Проверка видимости элементов
  await expect(usernameField).toBeVisible();
  await expect(passwordField).toBeVisible();
  await expect(submitButton).toBeVisible();

  // Ввод данных в поля
  await usernameField.fill('testuser');
  await passwordField.fill('password123');

  // Отправка формы
  await submitButton.click();

  // Проверка, что пользователь перенаправлен на страницу после логина
  await expect(page).toHaveURL('/dashboard');
});

В этом примере проверяется корректность отображения элементов формы, а также правильная работа логики при отправке данных.

Моки и фикстуры

Для тестирования компонентов часто используется моки (замены реальных API) и фикстуры для имитации данных. Это особенно важно, когда необходимо тестировать компоненты в изоляции от серверных зависимостей.

Пример использования мока:

const { test, expect, request } = require('@playwright/test');

test('Тестирование загрузки данных с API', async ({ page }) => {
  // Создание мока для API
  await page.route('https://api.example.com/data', async (route) => {
    await route.fulfill({
      status: 200,
      body: JSON.stringify({ message: 'Data loaded successfully' }),
    });
  });

  // Открытие страницы, которая вызывает этот API
  await page.goto('/data-page');

  // Проверка, что данные корректно отобразились на странице
  const dataMessage = await page.locator('.data-message');
  await expect(dataMessage).toHaveText('Data loaded successfully');
});

В этом примере API-запросы к серверу перехватываются и заменяются на заранее подготовленные данные, что позволяет тестировать поведение компонентов без реального обращения к серверу.

Запуск тестов

Для запуска тестов с помощью Playwright используется команда:

npx playwright test

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

npx playwright test tests/component/login.spec.js

Также Playwright позволяет запускать тесты в различных режимах, например, с графическим интерфейсом (не в headless-режиме), что полезно для отладки.

Отчетность и CI/CD

Для интеграции с CI/CD-пайплайнами Playwright поддерживает создание отчетов о выполнении тестов в различных форматах, таких как HTML, JSON и others. Для этого можно использовать встроенные репортеры.

Пример конфигурации отчетности:

module.exports = defineConfig({
  reporter: [
    ['dot'],
    ['html', { outputFolder: 'test-reports', open: 'always' }],
  ],
});

Эта настройка будет генерировать отчеты в формате HTML, которые можно открыть после выполнения тестов, чтобы проверить их результаты.

Использование тестов на разных устройствах

Playwright также позволяет тестировать веб-приложения на различных устройствах и разрешениях экранов. Это полезно для компонентных тестов, где важно проверить адаптивность интерфейса.

Пример использования мобильного устройства:

const { test, expect, devices } = require('@playwright/test');

test('Тестирование на мобильном устройстве', async ({ page }) => {
  const iPhone = devices['iPhone 12'];
  const context = await page.context({
    ...iPhone,
  });
  const mobilePage = await context.newPage();

  await mobilePage.goto('https://example.com');
  await expect(mobilePage).toHaveTitle('Example Domain');
});

Этот тест имитирует использование iPhone 12 для проверки корректности отображения страницы на мобильных устройствах.

Заключение

Настройка окружения для компонентных тестов в Playwright требует внимательного подхода к установке зависимостей, организации структуры проекта и конфигурации инструментов. Playwright предоставляет множество возможностей для тестирования компонентов, включая поддержку мобильных устройств, создание моков, а также интеграцию с CI/CD. С правильной настройкой можно добиться высокого уровня надежности и автоматизации тестирования, что способствует ускорению разработки и повышению качества приложения.

Оглавление