Узнайте об инструментах Playwright для автоматизации разработки и отладки браузеров, которые сделают ваше сквозное тестирование более приятным.

Playwright - это инструмент с открытым исходным кодом от Microsoft для автоматизации браузеров и сквозного тестирования. Драматург может управлять Chromium (Chrome), WebKit (Safari) и Firefox как в режиме с головой, так и без него (с окнами на экране и без них). И он поставляется с некоторыми довольно крутыми и мощными инструментами разработки и отладки, которые можно быстро и легко использовать. использовать.

Сквозные (E2E) тесты - это не совсем модульные тесты, в которых реальные браузеры используются для взаимодействия с веб-сайтом или веб-приложением, чтобы проверить, работает ли что-то должным образом. Они обычно используются для обеспечения правильной работы часто используемых рабочих процессов UX / UI, таких как страницы входа или другие взаимодействия приложений, часто когда становится слишком громоздко вручную тестировать все в продукте SaaS.

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

Статьи из этой серии

  1. Как писать сквозные тесты для Chrome, Safari и Firefox с помощью Playwright
  2. Драматург предлагает потрясающие инструменты для написания и отладки ваших сквозных тестов
  3. Как управлять аутентификацией и состоянием в ваших сквозных тестах с Playwright
  4. Скрытые лакомства драматурга, которые зарядят ваш опыт непрерывного тестирования

Примеры в этой статье основаны на тестах E2E от KPI Manager, SaaS-стартапа, с которым я был соучредителем. Наш продукт для кадровых агентств направлен на устранение проблем с продажами и производительностью позитивным и проактивным способом с помощью методов геймификации. По мере того, как мы обходили наш MVP и продолжали развивать продукт, тестировать все рабочие процессы вручную становилось все труднее. Таким образом, мы обратились к написанию сквозных тестов с Playwright для некоторых из наиболее неясных экранов и взаимодействий - мест, которые были более задействованы для тестирования или менее заметны сразу.

Изначально библиотека Playwright Test поставляется с двумя простыми в использовании, очень крутыми функциями, которые помогают нам разрабатывать и отлаживать наши тесты E2E: инструмент генерации кода Генератор тестов и инструмент Инспектор. . В этой статье не рассматривается, но также иногда может быть полезен Trace Viewer для изучения следов после запуска теста. Средство просмотра трассировки может быть полезно при отладке проблем с тестами в среде CI / CD.

Чтобы следовать примерам, настройтесь в новом проекте с помощью:

npm install --save-dev playwright @playwright/test

Генератор тестов

В прошлом одной из наиболее утомительных (и более дерьмовых!) Частей написания сквозных тестов было правильно настроить селекторы при нацеливании на узлы DOM, которые вы хотели щелкнуть, заполнить или иным образом взаимодействовать. У драматурга есть решение: их Генератор тестов.

Генератор тестов открывает указанный URL-адрес в браузере с заголовком (с окнами), а затем ожидает, когда вы начнете взаимодействовать со страницей. По мере того, как вы это делаете, он переводит ваше взаимодействие с браузером в методы драматурга. Например, нажатие на кнопку отправки сгенерирует page.click('button[type=submit]'). Это означает, что вы можете записать свой ручной тест своего веб-приложения и попросить Playwright сгенерировать тестовый код, который вы можете использовать в своем тесте E2E. Это очень удобно.

Вы можете запустить инструмент Test Generator с помощью:

npx playwright codegen <url>

Мне нравится использовать генератор тестов. Больше нет необходимости кропотливо настраивать автоматизацию моего браузера. Генератор позволяет мне быстро создать тест E2E, но также позволяет безболезненно просто выбросить этот тест сразу после изменения пользовательского интерфейса или рабочего процесса. Ничего страшного. Просто создайте новый тест.

Замедление вещей

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

test.use({ launchOptions: { slowMo: 1000 } })
test.describe('User signup page', () => {
  test('should let a new user sign up', async ({
    page,
  }) => {
    // test case here
  })
})

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

Инспектор драматурга

Отладка тестов E2E была отстой. Часто у вас остается метод «предположить и проверить» для отслеживания проблем: внесение изменений, повторный запуск теста, наблюдение за взаимодействиями в браузере и т. Д.

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

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

Чтобы запустить инспектор драматургов, запустите тесты с помощью:

npx playwright test <test file or name> --debug

В качестве альтернативы вы можете установить флаг PWDEBUG.

PWDEBUG=1 npx playwright test <test file or name>

Заключение

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

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

Вам также может понравиться:



Локальная разработка функций AWS Lambda
Как я разрабатываю функции AWS Lambda локально с использованием подхода« сначала тестирование medium.com»





3 отличные книги по истории вычислительной техники, которые должен прочитать каждый
Три книги о компьютерах, оборудовании и информации, которые должен прочитать каждый adieuadieu.medium.com



Если эта статья была полезной, поставьте ей лайк 👏.

Подпишитесь и получайте от меня будущие статьи прямо на свою электронную почту. Или станьте участником и поддержите меня и других авторов, подобных мне, здесь, на Medium. 🙇‍♂️