Генерация тестов — Тестирование с Playwright

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

Генератор тестов запускается командой codegen, за которой следует адрес тестируемой страницы.

npx playwright codegen demo.playwright.dev/todomvc

Эта команда открывает два окна:

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

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

• Проверить видимость.
• Проверить текст.
• Проверить значение.

Затем кликнуть на то место, которое надо проверить. После этого в тест добавится нужная проверка.

Этот процесс можно прервать или перезапустить в любой момент времени, поэтому не стоит переживать за лишние действия. К тому же, тест в инспекторе доступен для редактирования. Любые лишние действия можно без проблем убрать.

Конкретный пример

Выполним следующий сценарий:

1. Добавим задачу Hello Hexlet
2. Добавим задачу Learning something new
3. Добавим проверку на видимость задачи Hello Hexlet
4. Добавим проверку на видимость задачи Learning something new

В результате получится примерно такой тест:

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

test('test', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc/')
  await page.goto('https://demo.playwright.dev/todomvc/#/')
  await page.getByPlaceholder('What needs to be done?').click()
  await page.getByPlaceholder('What needs to be done?').fill('First ')
  await page
    .getByPlaceholder('What needs to be done?')
    .press('ControlOrMeta+a')
  await page.getByPlaceholder('What needs to be done?').fill('Hello Hexlet')
  await page.getByPlaceholder('What needs to be done?').press('Enter')
  await page
    .getByPlaceholder('What needs to be done?')
    .fill('Learning something new')
  await page.getByPlaceholder('What needs to be done?').press('Enter')
  await page
    .locator('li')
    .filter({ hasText: 'Learning something new' })
    .getByLabel('Toggle Todo')
    .check()
  await expect(page.getByText('Hello Hexlet')).toBeVisible()
  await expect(page.locator('body')).toContainText('Learning something new')
  await page
    .getByText(
      'This is just a demo of TodoMVC for testing, not the real TodoMVC app. todosMark',
    )
    .click()
})

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

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

test('test', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc/')
  const input = page.getByPlaceholder('What needs to be done?')
  await input.fill('Hello Hexlet')
  await input.press('Enter')
  await input.fill('Learning something new')
  await input.press('Enter')
  await page
    .getByRole('listitem')
    .filter({ hasText: 'Learning something new' })
    .getByLabel('Toggle Todo')
    .check()
  await expect(page.getByText('Hello Hexlet')).toBeVisible()
  await expect(page.getByText('Learning something new')).toBeVisible()
})

Самостоятельная работа

Повторите шаги из урока

1. Запустите генератор тестов для todomvc. Убедитесь, что открылось два окна: браузер с тестируемой страницей и инспектор Playwright
2. Добавьте задачу Hello Hexlet
3. Добавьте задачу Learning something new
4. Добавьте проверки на видимость задач
5. Сохраните сгенерированный тест
6. Проанализируйте и оптимизируйте сгенерированный тест. Упростите код, сократив ненужные действия и вынеся повторяющиеся локаторы в переменные
7. Запустите тест и убедитесь в его корректности
8. (Опционально) Попробуйте добавить дополнительные проверки или действия. Например, удаление задач или фильтрация списка. Проверьте, как меняется код и насколько он становится сложнее.

Дополнительные материалы

1. playwright.dev