Рабочий процесс — Тестирование с Playwright

• Тестовый проект
• Первый тест
• The AAA (Arrange-Act-Assert)
• Отладка
• Что дальше

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

Тестовый проект

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

Первый тест

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

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

test('test', async ({ page }) => {
  // Переходим на нужную страницу
  await page.goto('https://demo.playwright.dev/todomvc/')

  // Выбираем инпут с которым будем работать
  // Возвращается не DOM элемент, а "локатор"
  const input = page.getByPlaceholder('What needs to be done?')

  // Заполняем и нажимаем Enter
  const taskName = 'Finish Hexlet\'s course'
  await input.fill(taskName)
  await input.press('Enter')

  // Проверяем, что задача появилась в списке задач
  const item = page.getByTestId('todo-title').filter({ hasText: taskName })
  await expect(item).toBeVisible()
})

В редакторах с поддержкой Playwright запуск тестов можно делать по команде или клику прямо из редактора. В общем случае тесты запускаются из консоли командой npx playwright test

Пока нам здесь не все понятно, но это нормально, главное уловить общую суть, так как это скелет, из которого состоит любой e2e-тест.

На что нужно обратить внимание:

• Взаимодействие со страницей браузера происходит через объект page, а тест, который мы пишем, выполняется снаружи этого браузера.
• Здесь мы не оперируем DOM-элементами, так как к ним нет физического доступа и это не требуется
• Практически все действия асинхронные, так как любые воздействия на страницу и изменения страницы всегда происходят асинхронно. Что хорошо для пользователя, так как не блокируется взаимодействие с UI.

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

The AAA (Arrange-Act-Assert)

Тест, который мы рассмотрели выше, организован по принципу AAA, что расшифровывается как Arrange (Подготовка), Act (Действие) и Assert (Утверждение). Этот подход обеспечивает четкую и структурированную запись тестов, делая их понятными и удобными для поддержки. AAA делит тест на три ключевые части:

1. Arrange (Подготовка): На этом этапе происходит подготовка всего необходимого для теста. Сюда входит создание объектов, настройка данных, конфигурация окружения и любые другие действия, необходимые для создания начального состояния теста.

   // В этом тесте нет данных, но есть переход на нужную страницу для начала тестирования
   await page.goto('https://demo.playwright.dev/todomvc/')
   

2. Act (Действие): На этом этапе выполняется действие, которое требуется протестировать. Это может быть вызов метода, отправка запроса, выполнение операции или любое другое действие, которое должно быть проверено.

   const input = page.getByPlaceholder('What needs to be done?')
   // Заполняем и нажимаем Enter
   const taskName = 'Finish Hexlet\'s course'
   await input.fill(taskName)
   await input.press('Enter')
   

3. Assert (Утверждение): На этом этапе проверяются результаты действия. Здесь используются утверждения для сравнения фактических результатов с ожидаемыми, чтобы убедиться в правильности работы кода.

   const item = page.getByTestId('todo-title').filter({ hasText: taskName })
   await expect(item).toBeVisible()
   

Отладка

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

Это настолько важная часть в e2e-тестировании, что разработчики Playwright создали мощный инструмент интерактивной отладки, который запускается по команде npx playwright test --ui. Запускать тесты в этом режиме стоит тогда, когда обычный запуск закончился с ошибкой и не очевидно как ее быстро починить.

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

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

Что дальше

Написание e2e-тестов включает в себя три ключевые области:

• Локаторы: Методы выбора элементов со страницы, чтобы с ними можно было взаимодействовать.
• События: Методы для вызова браузерных событий, которые что-то меняют на странице.
• Проверки: Методы проверяющие как изменилась страница, например, текст.

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

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

1. UI Mode