Playwright интеграция

Введение в Playwright и React Testing Library

Playwright — это современный инструмент для автоматизированного тестирования пользовательских интерфейсов, разработанный командой Microsoft. Он поддерживает тестирование веб-приложений в нескольких браузерах, таких как Chrome, Firefox и WebKit. Основное преимущество Playwright заключается в его возможности взаимодействовать с реальными браузерами, а не с симулированными средами, что позволяет создавать тесты, более приближенные к реальным условиям использования.

React Testing Library (RTL) — это библиотека для тестирования компонентов React, ориентированная на проверку поведения компонентов с точки зрения пользователя. Она позволяет писать тесты, которые не зависят от реализации, а фокусируются на том, как элементы взаимодействуют с пользователем.

Интеграция этих двух инструментов позволяет создавать мощные и надежные тесты, которые одновременно проверяют как внутреннюю логику React-компонентов, так и их взаимодействие с браузером на реальном уровне.

Установка и настройка Playwright с React Testing Library

Для начала необходимо установить зависимости. Playwright и React Testing Library можно подключить через npm или yarn. Включение этих библиотек в проект гарантирует, что тесты смогут работать как с рендером компонентов, так и с функционалом браузера.

npm install --save-dev @testing-library/react @testing-library/jest-dom playwright

В случае использования yarn:

yarn add --dev @testing-library/react @testing-library/jest-dom playwright

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

npx playwright install

Это действие скачает необходимые браузеры для тестирования (Chromium, Firefox и WebKit).

Настройка тестового окружения

Для использования Playwright в связке с React Testing Library необходимо правильно настроить тестовый фреймворк. В качестве примера, рассмотрим использование Jest, который является стандартным инструментом для тестирования в экосистеме React.

  1. Создайте файл настройки Jest, если его нет. Для этого в package.json добавьте или обновите следующие параметры:
{
  "jest": {
    "preset": "react",
    "testEnvironment": "jsdom",
    "setupFilesAfterEnv": [
      "@testing-library/jest-dom/extend-expect"
    ]
  }
}
  1. Теперь нужно подключить Playwright к Jest. В Jest можно настроить глобальные хуки для работы с браузером Playwright. Например, можно создать файл jest.setup.js и добавить туда следующее:
import { chromium } from 'playwright';

globalThis.__BROWSER__ = null;

beforeAll(async () => {
  globalThis.__BROWSER__ = await chromium.launch();
});

afterAll(async () => {
  if (globalThis.__BROWSER__) {
    await globalThis.__BROWSER__.close();
  }
});

Это подключит Playwright и обеспечит открытие браузера перед выполнением тестов, а также его закрытие после завершения тестов.

Использование Playwright для взаимодействия с компонентами

Основное преимущество интеграции с Playwright заключается в возможности автоматического тестирования поведения компонентов в реальных условиях браузера. Для тестирования с использованием React Testing Library можно создать компоненты и взаимодействовать с ними через Playwright, выполняя различные действия, такие как клики, ввод текста и прокрутка.

Рассмотрим пример теста, где мы будем тестировать форму ввода с помощью Playwright.

  1. Создаем компонент формы:
import React, { useState } from 'react';

export const MyForm = () => {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Form submitted with value: ${value}`);
  };

  return (
    <form onSub mit={handleSubmit}>
      <input
        type="text"
        value={value}
        onCha nge={handleChange}
        placeholder="Enter text"
      />
      <button type="submit">Submit</button>
    </form>
  );
};
  1. Создаем тест с использованием Playwright для взаимодействия с компонентом:
import { render, screen, fireEvent } from '@testing-library/react';
import { MyForm } from './MyForm';
import { chromium } from 'playwright';

describe('MyForm', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await chromium.launch();
    page = await browser.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  it('should submit form with value', async () => {
    // Рендерим компонент в браузере
    await page.setContent('<div id="root"></div>');
    await render(<MyForm />, { container: document.getElementById('root') });

    // Ищем элементы на странице
    const input = await screen.findByPlaceholderText('Enter text');
    const button = await screen.findByRole('button', { name: /submit/i });

    // Вводим текст и отправляем форму
    await fireEvent.change(input, { target: { value: 'Test Value' } });
    await fireEvent.click(button);

    // Проверяем результат отправки формы (в данном случае это будет alert)
    const alertMessage = await page.evaluate(() => window.alert.mock.calls[0][0]);
    expect(alertMessage).toBe('Form submitted with value: Test Value');
  });
});

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

Параллельное тестирование с Playwright и RTL

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

Для параллельного тестирования можно использовать test.describe.parallel() в Jest или другой подходящий механизм для организации тестов в Playwright. Например:

import { test, expect } from '@playwright/test';

test.describe.parallel('MyForm', () => {
  test('should submit form with correct value in Chrome', async ({ page }) => {
    await page.goto('http://localhost:3000');
    await page.fill('input[type="text"]', 'Test Value');
    await page.click('button[type="submit"]');
    expect(await page.textContent('alert')).toBe('Form submitted with value: Test Value');
  });

  test('should submit form with correct value in Firefox', async ({ page }) => {
    await page.goto('http://localhost:3000');
    await page.fill('input[type="text"]', 'Another Value');
    await page.click('button[type="submit"]');
    expect(await page.textContent('alert')).toBe('Form submitted with value: Another Value');
  });
});

Здесь Playwright запускает тесты параллельно в разных браузерах, обеспечивая более полное покрытие.

Заключение

Интеграция Playwright с React Testing Library дает возможность писать тесты, которые охватывают не только внутреннюю логику React-компонентов, но и их поведение в реальных браузерах. Это позволяет создавать более надежные и рефлексивные тесты, что особенно важно для приложений, которые активно взаимодействуют с пользователями через UI.

Оглавление