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

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()
})