День 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/
