День 1283. #Testing
Playwright Trace Viewer

Начало: E2E-тесты с Помощью Playwright

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

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

[TestInitialize]
public async Task TestSetup()
{
  await Context.Tracing.StartAsync(
   new TracingStartOptions {
    Title = TestContext.TestName,
    Screenshots = true,
    Snapshots = true,
    Sources = true
   }
  );
}

[TestCleanup]
public async Task TestCleanup()
{
  await Context.Tracing.StopAsync(
   new TracingStopOptions {
    Path = TestContext.TestName + ".zip"
   }
  );
}

Метод TestInitialize запускает для нас трассировку. Объект TestContext — это специальный класс MSTest, который может сообщить нам, какой тест выполняется, вы можете заменить его на аналогичный класс в другой тестовой среде или просто поместить сюда любую строку.
TestCleanup завершает трассировку, сохраняя результаты в ZIP-файле.

В папке bin теперь будет zip-файл для каждого нашего теста. Допустим, наш тест не прошёл. Полученный zip-файл можно просмотреть в инструменте просмотра трассировки на https://trace.playwright.dev/

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

В центре страницы находится наш скриншот. Но что важно, мы можем переключать вкладки для представления «До» (Before) и «После» (After). Это безумно удобно при вводе текста или при заполнении других полей ввода. Представьте, что тест пытается заполнить очень большую форму, и на самом первом шаге он неправильно заполняет текстовое поле. Тест потерпит неудачу только при отправке формы и проверке данных, но на скриншоте в моменте возникновения ошибки мы можем даже не увидеть само текстовое поле. Playwright даёт нам пошаговое представление о каждом шаге теста, происходящем по мере его прохождения.

Справа есть куча отладочной информации, включая отладочный вывод Playwright, консольный вывод браузера, сетевой вывод браузера (аналогично инструментам разработчика Chrome/Firefox), а также исходный код нашего текста с выделенным текущим шагом.

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

Источник: https://dotnetcoretutorials.com/2022/05/20/using-playwright-e2e-tests-with-c-net/