Использование Playwright для тестирования React-приложений AG Grid

Статья подготовлена для блога AG Grid Камероном Пэйви (Cameron Pavey)

Playwright — это инструмент тестирования, созданный и поддерживаемый компанией Microsoft и предназначенный в первую очередь для сквозного тестирования (E2E). Он обладает рядом особенностей, которые делают его привлекательным выбором для команд, рассматривающих различные инструменты E2E, включая кросс-языковой API, позволяющий писать тесты на различных языках (JavaScript, TypeScript, Python, .NET и Java) и кросс-платформенную поддержку всех основных браузеров.

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

В этом руководстве вы узнаете больше о различиях между E2E-тестированием и компонентным тестированием, а также увидите, как Playwright облегчает оба вида тестирования. Вы узнаете, как создать простое приложение React, использующее AG Grid, и как проверить функциональность этого приложения на уровне E2E и компонентного тестирования с помощью Playwright.

Что такое E2E-тесты

E2E-тесты — это один из трех уровней тестирования, описанных в пирамиде тестирования. Они обычно считаются одним из более медленных и дорогих типов тестов, поскольку обычно вызывают всю систему и имитируют взаимодействие пользователя с полностью готовой системой. Это неизбежно приводит к более длительному выполнению тестов (по сравнению с модульными и интеграционными тестами, которые находятся ближе к основанию пирамиды), с зачастую хрупкими императивными инструкциями, описывающими, как программа запуска тестов должна взаимодействовать с приложением. Хотя в этом руководстве основное внимание будет уделено Playwright, Cypress также является очень привлекательным вариантом, и он недавно выпустил бета-версию своего решения для тестирования компонентов, аналогичного Playwright.

Одним из основных различий между Playwright и Cypress является философия, которой они придерживаются. Playwright одобряет использование модели Page Object Model (POM). Однако Cypress считает, что повторное использование кода с помощью пользовательских команд является эффективной альтернативой, хотя модель POM все еще достижима в Cypress, если вы предпочитаете ее. В блоге AG Grid есть статья об использовании плагина Cypress для тестирования приложений AG Grid, которая красноречиво демонстрирует достоинства функциональности пользовательских команд Cypress. В любом случае, оба инструмента эффективны для тестирования E2E, но как насчет тестирования компонентов?

Проблемы тестирования компонентов

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

Другой подход заключается в том, чтобы относиться к ним как к модульным тестам. Вы можете достичь этого, используя такие инструменты, как Jest в качестве программы запуска тестов и Testing Library, которая представляет собой библиотеку утилит тестирования, раскрывающую некоторые функции, чтобы помочь вам тестировать ваши компоненты изолированно. Как правило, это хороший подход с точки зрения усилий, удобства сопровождения и общего опыта разработчика. Однако все же есть некоторые недостатки, наиболее заметным из которых является то, что тесты не запускаются в реальном браузере. Вместо этого в большинстве случаев тесты используют JSDom. Именно здесь на помощь приходит функция тестирования компонентов Playwright.

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

E2E и компонентное тестирование с помощью Playwright

Прежде чем приступить к работе, вам понадобится несколько вещей:

• Последняя версия Node.js (которая поставляется с npm). В этом учебнике используется версия 14.19.3.
• Редактор кода по вашему выбору. Visual Studio Code — хороший выбор, если у вас еще нет редактора кода, который вы предпочитаете.

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

Когда у вас есть все необходимые условия, первое, что вам нужно сделать, это создать новый проект. Для этого урока вы можете использовать Vite, поскольку он быстрый, минимальный и легкий для начала работы, но другие программы для создания приложений, такие как create-react-app и Next.js, также подойдут. Чтобы создать новый проект, откройте терминал и выполните следующие команды:

npm create vite@latest ag-grid-playwright --template react
cd ag-grid-playwright
npm install

Это создаст каталог с именем ag-grid-playwright/ с минималистским проектом внутри него, после чего вы перейдете в каталог и установите все текущие зависимости node. Далее вы можете установить Playwright с помощью следующей команды:

npm init playwright@latest

Программа установки задаст вам вопросы, например, хотите ли вы использовать JavaScript или TypeScript, где вы хотите хранить тестовые файлы и хотите ли вы создать GitHub Action. Если вы следите за развитием событий, выберите JavaScript, когда появится запрос, а затем примите ответы по умолчанию на остальные вопросы, так как они подойдут для этого руководства.

После установки Playwright можно проверить, работает ли он так, как ожидалось. По умолчанию он поставляется с примером теста, который запускает двадцать пять примеров утверждений в каждом из трех основных браузеров: Chrome, Firefox и WebKit. Чтобы запустить этот файл спецификации, выполните следующую команду:

npx playwright test

Если пока все в порядке, вы должны увидеть результат, подобный этому:

Чтобы упростить вывод позже, когда вы будете добавлять свои тесты, вы можете удалить пример, расположенный по адресу tests/example.spec.js.

Теперь, когда Playwright настроен, можно установить еще несколько зависимостей, которые понадобятся для сборки реального приложения AG Grid. Для этого выполните следующую команду:

npm install ag-grid-react ag-grid-community

Создание приложения

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

mkdir src/components
touch src/components/DataGrid.jsx
touch src/components/CustomRenderer.jsx

Это создаст каталог и файлы для необходимых вам компонентов. Далее откройте файл CustomRenderer.jsx в редакторе и вставьте следующее содержимое:

export const CustomRenderer = (props) => {
  return <span>{`$${props.value.toLocaleString()}`}</span>;
};

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

import React, { useState } from "react";
import { AgGridReact } from "ag-grid-react";

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import { CustomRenderer } from "./CustomRenderer";

export const DataGrid = () => {
  const [rowData] = useState([
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxster", price: 72000 },
  ]);

  const [columnDefs] = useState([
    { field: "make" },
    { field: "model" },
    { field: "price", cellRenderer: CustomRenderer },
  ]);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
    <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>
    </div>
  );
};

Этот код представляет собой слегка измененную версию примера из документации AG Grid. Модификация этого кода заключается в использовании компонента CustomRenderer для столбца price, который будет отображать значение в виде форматированной денежной суммы, а не просто числа. Вам нужно будет изменить еще один файл, чтобы приложение отображалось правильно. Откройте src/App.jsx и замените его содержимое на следующее:

import { DataGrid } from "./components/DataGrid";

function App() {
  return <DataGrid />;
}

export default App;

Прежде чем перейти к тесту E2E, необходимо убедиться, что приложение работает так, как ожидалось. Для этого в терминале выполните команду npm run dev, которая попросит Vite запустить сервер dev, позволяющий получить доступ к вашему приложению, обычно расположенный по адресу http://localhost:3000, если порт свободен. Если по какой-то причине приложение должно быть запущено на другом порту, вывод терминала подскажет вам, где оно запущено, когда вы выполните команду. Когда вы перейдете по этому URL, вы увидите что-то вроде этого:

Хотя это приложение очень простое, оно дает вам несколько вещей, которые вы можете протестировать как с помощью E2E, так и с помощью компонентных тестов, и поэтому служит отличным примером для такого рода учебников.

Тест E2E

Для E2E-теста вы хотите убедиться, что приложение работает так, как ожидается. В случае с этим простым приложением это сводится к отображению правильных данных. Для этого создайте новый файл по адресу tests/app.spec.jsx и дайте ему следующее содержание:

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

test("Check that all expected data is present", async ({ page }) => {
  await page.goto("http://localhost:3000");

  // Verify that the title is correct
  await expect(page).toHaveTitle("Vite App");

  // Specify the data that we expect to be present
  const expectedData = [
    ["Toyota", "Celica", "$35,000"],
    ["Ford", "Mondeo", "$32,000"],
    ["Porsche", "Boxster", "$72,000"],
  ];

  // Verify that the data is correct
  for (let index = 0; index < expectedData.length; index++) {
    const row = await page.locator("role=row").nth(index + 1);
    const [make, model, price] = expectedData[index];
    await expect(row).toContainText([make, model, price]);
  }
});

Этот тест даст команду Playwright перейти к вашему приложению, размещенному на dev-сервере Vite. Проверьте правильность заголовка страницы и наличие трех ожидаемых строк данных. Вы можете добавить скрипт в файл package.json, чтобы помочь запустить тесты E2E. Откройте файл package.json и добавьте следующую строку в объект scripts:

…
"test": "playwright test"
…

Теперь убедитесь, что ваш сервер Vite dev по-прежнему запущен, и ваше приложение доступно на порту 3000, а затем в новом окне терминала (если нужно, перейдите обратно в каталог проекта) выполните следующую команду:

npm run test

Вы должны увидеть результат, подобный этому:

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

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

Далее вы увидите, как с помощью Playwright можно создать несколько простых компонентных тестов для компонентов CustomRenderer и DataGrid.

Тесты компонентов

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

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

npm init playwright@latest --ct

При этом вам будут заданы вопросы, аналогичные вопросам начальной настройки, но если вы следите за развитием событий, отвечайте «JavaScript» и «React», когда вам будет предложено указать язык и фреймворк соответственно. После завершения этой команды у вас должен появиться новый файл playwright-ct.config.js. Откройте этот файл и отредактируйте свойство testDir следующим образом:

…
testDir: ‘./src’,
…

Это изменение необходимо, поскольку значение по умолчанию './' будет включать ваши тесты E2E, которые вы не обязательно хотите запускать вместе с тестами компонентов в одной команде. После внесения этих изменений вы можете создать два компонентных теста. Для первого создайте файл в src/components/CustomRenderer.spec.jsx и дайте ему следующее содержание:

import { test, expect } from "@playwright/experimental-ct-react";
import { CustomRenderer } from "./CustomRenderer";

test.use({ viewport: { width: 500, height: 500 } });

test("formats value correctly", async ({ mount }) => {
  const component = await mount(<CustomRenderer value={10000} />);
  await expect(component).toContainText("$10,000");
});

Этот тест убедится, что CustomRenderer правильно анализирует числовые значения в денежные. Далее создайте файл по адресу src/components/DataGrid.spec.jsx и придайте ему следующее содержание:

import { test, expect } from "@playwright/experimental-ct-react";
import { DataGrid } from "./DataGrid";

test.use({ viewport: { width: 500, height: 500 } });

test("contains the expected data", async ({ mount }) => {
  const component = await mount(<DataGrid />);

  const expectedData = [
    ["Toyota", "Celica", "$35,000"],
    ["Ford", "Mondeo", "$32,000"],
    ["Porsche", "Boxster", "$72,000"],
  ];

  // Verify that the data is correct
  for (let index = 0; index < expectedData.length; index++) {
    const row = await component.locator("role=row").nth(index + 1);
    const [make, model, price] = expectedData[index];
    await expect(row).toContainText([make, model, price]);
  }
});

Вы заметите, что этот тест сильно заимствует у теста E2E в плане логики. В конце концов, он выполняет очень похожие утверждения из-за ограниченной области применения. Однако ключевое отличие заключается в том, что он не инстанцирует все ваше приложение и не требует, чтобы ваш Vite dev сервер был запущен. Создав оба этих теста, вы можете выполнить следующую команду для их выполнения:

npm run test-ct

После выполнения этой команды вы должны увидеть результат, аналогичный результату вашего теста E2E, только теперь вместо 3 будет 6 (поскольку у вас два теста и три браузера):

Возможность тестировать компоненты в изоляции, вдали от остальной части приложения, очень важна, поскольку тесты не только будут выполняться быстрее, чем более тяжелые E2E-тесты, но, что более важно, на тесты не будут влиять внешние факторы и несвязанный код. Выполнение компонентных тестов с помощью тех же инструментов, что и E2E-тесты (в отличие от использования Jest и библиотеки тестирования), является огромным преимуществом. Это открывает возможности для повышения производительности, например, совместного использования тестовых помощников между E2E и компонентными тестами, позволяя вам обмениваться абстракциями и утилитами между этими двумя областями тестирования без недостатков, которые традиционно возникают при их полном слиянии.

Краткое описание шагов на Github

Код для этого руководства вы можете найти в этом публичном репозитории GitHub.

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

npm install

Во-вторых, установите Playwright и браузеры:

npx playwright install

Для запуска тестов компонентов:

npm run test-ct

Для запуска конечных тестов нам нужно запустить dev-сервер из одной консоли с помощью npm run dev, чтобы запустить приложение, работающее на localhost. Затем запустите конечные тесты:

npm run test

После каждого запуска теста вы можете использовать npx playwright show-report для просмотра отчета о выполнении.

Завершение

В этом уроке вы узнали, как создать простое приложение с помощью React, Vite и AG Grid, а затем протестировать это приложение на уровне E2E и компонентов с помощью Playwright. Вы также узнали о различиях между E2E и компонентным тестированием, а также о некоторых инструментах, которые могут помочь вам создать эти виды тестов, таких как Playwright, Cypress, Jest и Testing Library.

Если вы хотите узнать больше о Playwright, официальная документация — отличное место для начала работы.