Лучшие практики

Введение

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

Философия тестирования

Тестируйте поведение, видимое пользователю

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

Делайте тесты максимально изолированными

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

Чтобы избежать повторения для определенной части вашего теста, вы можете использовать хуки before и after. В вашем тестовом файле добавьте хук before, чтобы выполнить часть вашего теста перед каждым тестом, например, переход на определенный URL или вход в часть вашего приложения. Это сохраняет ваши тесты изолированными, так как ни один тест не зависит от другого. Однако также допустимо иметь небольшое дублирование, когда тесты достаточно просты, особенно если это делает ваши тесты более понятными и легкими для чтения и поддержки.

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

test.beforeEach(async ({ page }) => {
  // Выполняется перед каждым тестом и выполняет вход на каждой странице.
  await page.goto('https://github.com/login');
  await page.getByLabel('Username or email address').fill('username');
  await page.getByLabel('Password').fill('password');
  await page.getByRole('button', { name: 'Sign in' }).click();
});

test('first', async ({ page }) => {
  // страница вошла в систему.
});

test('second', async ({ page }) => {
  // страница вошла в систему.
});

Вы также можете повторно использовать состояние входа в тестах с помощью настройки проекта. Таким образом, вы можете войти в систему только один раз, а затем пропустить шаг входа для всех тестов.

Избегайте тестирования сторонних зависимостей

Тестируйте только то, что вы контролируете. Не пытайтесь тестировать ссылки на внешние сайты или сторонние серверы, которые вы не контролируете. Это не только отнимает много времени и может замедлить ваши тесты, но и вы не можете контролировать содержимое страницы, на которую вы ссылаетесь, или если там есть баннеры с куки или оверлейные страницы или что-то еще, что может вызвать сбой вашего теста.

Вместо этого используйте Playwright Network API и гарантируйте необходимый ответ.

await page.route('**/api/fetch_data_third_party_dependency', route => route.fulfill({
  status: 200,
  body: testData,
}));
await page.goto('https://example.com');

Тестирование с базой данных

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

Лучшие практики

Используйте локаторы

Чтобы написать сквозные тесты, нам сначала нужно найти элементы на веб-странице. Мы можем сделать это, используя встроенные локаторы Playwright. Локаторы обладают автоматическим ожиданием и возможностью повторного выполнения. Автоматическое ожидание означает, что Playwright выполняет ряд проверок на возможность выполнения действий на элементах, таких как обеспечение видимости и доступности элемента перед выполнением клика. Чтобы сделать тесты устойчивыми, мы рекомендуем отдавать приоритет атрибутам, ориентированным на пользователя, и явным контрактам.

// 👍
page.getByRole('button', { name: 'submit' });

Используйте цепочку и фильтрацию

Локаторы могут быть сцеплены, чтобы сузить поиск до определенной части страницы.

const product = page.getByRole('listitem').filter({ hasText: 'Product 2' });

Вы также можете фильтровать локаторы по тексту или другому локатору.

await page
    .getByRole('listitem')
    .filter({ hasText: 'Product 2' })
    .getByRole('button', { name: 'Add to cart' })
    .click();

Предпочитайте атрибуты, ориентированные на пользователя, XPath или CSS-селекторам

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

// 👎
page.locator('button.buttonIcon.episode-actions-later');

Используйте локаторы, устойчивые к изменениям в DOM.

// 👍
page.getByRole('button', { name: 'submit' });

Генерация локаторов

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

Используйте codegen для генерации локаторов

Чтобы выбрать локатор, выполните команду codegen, указав URL, с которого вы хотите выбрать локатор.

npm

npx playwright codegen playwright.dev

yarn

yarn playwright codegen playwright.dev

pnpm

pnpm exec playwright codegen playwright.dev

Это откроет новое окно браузера, а также инспектор Playwright. Чтобы выбрать локатор, сначала нажмите кнопку 'Record', чтобы остановить запись. По умолчанию, когда вы выполняете команду codegen, начнется новая запись. После остановки записи кнопка 'Pick Locator' станет доступной для нажатия.

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

Используйте расширение VS Code для генерации локаторов

Вы также можете использовать расширение VS Code для генерации локаторов, а также записи теста. Расширение VS Code также предоставляет отличный опыт разработки при написании, запуске и отладке тестов.

Используйте веб-утверждения

Утверждения — это способ проверить, совпадает ли ожидаемый результат с фактическим. Используя веб-утверждения, Playwright будет ждать, пока ожидаемое условие не будет выполнено. Например, при тестировании сообщения об оповещении тест нажмет кнопку, которая вызывает появление сообщения, и проверит, что сообщение об оповещении присутствует. Если сообщение об оповещении появляется через полсекунды, такие утверждения, как toBeVisible(), будут ждать и повторять попытку, если это необходимо.

// 👍
await expect(page.getByText('welcome')).toBeVisible();

// 👎
expect(await page.getByText('welcome').isVisible()).toBe(true);

Не используйте ручные утверждения

Не используйте ручные утверждения, которые не ожидают expect. В приведенном ниже коде await находится внутри expect, а не перед ним. При использовании утверждений, таких как isVisible(), тест не будет ждать ни секунды, он просто проверит наличие локатора и немедленно вернется.

// 👎
expect(await page.getByText('welcome').isVisible()).toBe(true);

Используйте веб-утверждения, такие как toBeVisible(), вместо этого.

// 👍
await expect(page.getByText('welcome')).toBeVisible();

Настройка отладки

Локальная отладка

Для локальной отладки мы рекомендуем отлаживать ваши тесты в реальном времени в VSCode., установив расширение VS Code. Вы можете запускать тесты в режиме отладки, щелкнув правой кнопкой мыши на строке рядом с тестом, который вы хотите запустить, что откроет окно браузера и приостановит выполнение в месте, где установлен точка останова.

Вы можете отлаживать ваш тест в реальном времени, щелкая или редактируя локаторы в вашем тесте в VS Code, что выделит этот локатор в окне браузера, а также покажет вам любые другие соответствующие локаторы, найденные на странице.

Вы также можете отлаживать ваши тесты с помощью инспектора Playwright, запустив ваши тесты с флагом --debug.

npm

npx playwright test --debug

yarn

yarn playwright test --debug

pnpm

pnpm exec playwright test --debug

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

Чтобы отладить конкретный тест, добавьте имя тестового файла и номер строки теста, а затем флаг --debug.

npm

npx playwright test example.spec.ts:9 --debug

yarn

yarn playwright test example.spec.ts:9 --debug

pnpm

pnpm exec playwright test example.spec.ts:9 --debug

Отладка на CI

Для сбоев на CI используйте просмотрщик трассировок Playwright вместо видео и скриншотов. Просмотрщик трассировок предоставляет вам полную трассировку ваших тестов в виде локального прогрессивного веб-приложения (PWA), которое можно легко поделиться. С помощью просмотрщика трассировок вы можете просматривать временную шкалу, инспектировать снимки DOM для каждого действия, используя инструменты разработчика, просматривать сетевые запросы и многое другое.

Трассировки настраиваются в конфигурационном файле Playwright и настроены на выполнение на CI при первой повторной попытке неудачного теста. Мы не рекомендуем устанавливать это значение на on, чтобы трассировки выполнялись для каждого теста, так как это очень нагружает производительность. Однако вы можете запустить трассировку локально при разработке с флагом --trace.

npm

npx playwright test --trace on

yarn

yarn playwright test --trace on

pnpm

pnpm exec playwright test --trace on

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

npm

npx playwright show-report

yarn

yarn playwright show-report

pnpm

pnpm exec playwright show-report

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

Используйте инструменты Playwright

Playwright поставляется с рядом инструментов, которые помогут вам писать тесты.

• Расширение VS Code предоставляет отличный опыт разработки при написании, запуске и отладке тестов.
• Генератор тестов может генерировать тесты и выбирать локаторы за вас.
• Просмотрщик трассировок предоставляет вам полную трассировку ваших тестов в виде локального PWA, которое можно легко поделиться. С помощью просмотрщика трассировок вы можете просматривать временную шкалу, инспектировать снимки DOM для каждого действия, просматривать сетевые запросы и многое другое.
• UI Mode позволяет вам исследовать, запускать и отлаживать тесты с опытом путешествия во времени, включая режим наблюдения. Все тестовые файлы загружаются в боковую панель тестирования, где вы можете развернуть каждый файл и блок описания, чтобы индивидуально запускать, просматривать, наблюдать и отлаживать каждый тест.
• TypeScript в Playwright работает из коробки и предоставляет вам лучшие интеграции с IDE. Ваша IDE покажет вам все, что вы можете сделать, и выделит, когда вы делаете что-то неправильно. Опыт работы с TypeScript не требуется, и не обязательно, чтобы ваш код был на TypeScript, все, что вам нужно сделать, это создать ваши тесты с расширением .ts.

Тестируйте во всех браузерах

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

playwright.config.ts

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

Держите вашу зависимость Playwright в актуальном состоянии

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

npm

npm install -D @playwright/test@latest

yarn

yarn add --dev @playwright/test@latest

pnpm

pnpm install --save-dev @playwright/test@latest

Проверьте заметки о выпуске, чтобы узнать, какая последняя версия и какие изменения были выпущены.

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

npm

npx playwright --version

yarn

yarn playwright --version

pnpm

pnpm exec playwright --version

Запускайте тесты на CI

Настройте CI/CD и запускайте ваши тесты часто. Чем чаще вы запускаете ваши тесты, тем лучше. В идеале, вы должны запускать ваши тесты при каждом коммите и pull request. Playwright поставляется с GitHub actions workflow, так что тесты будут запускаться на CI для вас без необходимости настройки. Playwright также может быть настроен на CI среде по вашему выбору.

Используйте Linux при запуске ваших тестов на CI, так как это дешевле. Разработчики могут использовать любую среду при локальном запуске, но используйте Linux на CI. Рассмотрите возможность настройки Sharding, чтобы сделать CI быстрее.

Оптимизация загрузки браузеров на CI

Устанавливайте только те браузеры, которые вам действительно нужны, особенно на CI. Например, если вы тестируете только с Chromium, установите только Chromium.

.github/workflows/playwright.yml

# Вместо установки всех браузеров
npx playwright install --with-deps

# Установите только Chromium
npx playwright install chromium --with-deps

Это экономит как время загрузки, так и дисковое пространство на ваших CI машинах.

Линтуйте ваши тесты

Мы рекомендуем TypeScript и линтинг с помощью ESLint для ваших тестов, чтобы рано выявлять ошибки. Используйте правило @typescript-eslint/no-floating-promises ESLint, чтобы убедиться, что нет пропущенных await перед асинхронными вызовами к API Playwright. На вашем CI вы можете запустить tsc --noEmit, чтобы убедиться, что функции вызываются с правильной сигнатурой.

Используйте параллелизм и шардирование

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

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

test.describe.configure({ mode: 'parallel' });

test('runs in parallel 1', async ({ page }) => { /* ... */ });
test('runs in parallel 2', async ({ page }) => { /* ... */ });

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

npm

npx playwright test --shard=1/3

yarn

yarn playwright test --shard=1/3

pnpm

pnpm exec playwright test --shard=1/3

Советы по повышению производительности

Используйте мягкие утверждения

Если ваш тест не удался, Playwright предоставит вам сообщение об ошибке, показывающее, какая часть теста не удалась, что вы можете увидеть либо в VS Code, терминале, HTML-отчете или просмотрщике трассировок. Однако вы также можете использовать мягкие утверждения. Они не немедленно прекращают выполнение теста, а вместо этого компилируют и отображают список неудачных утверждений после завершения теста.

// Сделайте несколько проверок, которые не остановят тест при неудаче...
await expect.soft(page.getByTestId('status')).toHaveText('Success');

// ... и продолжайте тест, чтобы проверить больше вещей.
await page.getByRole('link', { name: 'next page' }).click();