Использование Playwright Test для VSCode для отладки вашего кода
10 февраля 2023 г.Одним из самых популярных действий разработчиков является отладка кода с помощью console.log.
Но сегодня я хочу показать вам, как отлаживать ваши тесты Playwright.
Начнем с Инспектора драматургов.
Используя параметр --debug при запуске тестов, Playwright открывает на вашем дисплее два новых окна: браузер и инспектор Playwright.
Чтобы попробовать это, вы можете ввести в своем терминале эту команду npx playwright test --debug, результат выглядит следующим образом
Вы можете использовать команды в инспекторе, чтобы двигаться вперед в тесте и проверять материал.
Круто, но я предпочитаю отлаживать тесты прямо из своего редактора (VsCode). Для этого необходимо установить официальное расширение под названием Playwright Test for VSCode. Расширение позволяет вам устанавливать Playwright в свои проекты или добавлять новую конфигурацию браузера, но сегодня цель — функция отладки.
Теперь в VsCode, если вы откроете обозреватель тестов, вы сможете увидеть все свои тесты в проектах и запустить их или отладить прямо из редактора. Вот пример.
Хорошо, теперь пришло время посмотреть, как вы можете запускать или отлаживать тест прямо из VsCode.
Прежде всего, используя команду в правом верхнем углу панели Test Explorer, вы можете выбрать между запуском или отладкой всех тестов в вашем наборе. Нажав на стрелку слева от этих кнопок, вы также можете решить, в каком браузере вы хотите запускать свои тесты. Вот короткая демонстрация!
В этом примере вы можете увидеть, как работает бегун, но теперь пришло время посмотреть, как можно отлаживать тесты.
Приступим к добавлению точки останова в базу кода. Если вы не знакомы с этим в VsCode, то элементарно, кликните мышкой слева от строки, где вы хотите, чтобы отладчик остановил свое выполнение.
https://youtu.be/QIryVOtMXvM?embedable=true
Теперь пришло время отладить тест. Мы увидим два метода отладки тестов; первый запускает все тесты, а второй запускает только необходимый тест.
Отладить все тесты
Используя значок в правом верхнем углу обозревателя тестов, вы можете запустить все свои тесты в режиме отладки, и для каждого теста с точкой останова VsCode может остановить выполнение и разрешить вам проверить статус теста. Вот пример видео.
https://youtu.be/F5L-qpg3UBA?embedable=true
Это хороший пример, но обычно вы хотите отлаживать один тест за раз.
Отладка только необходимого теста
Чтобы сделать это, поток очень похож, вам нужно выбрать, какой тест вы хотите отладить, и вставить точку останова, где вы хотите, чтобы выполнение остановилось. Затем в обозревателе тестов вам нужно найти свой тест; вы можете ввести название вашего теста в строке поиска, или вы можете прокрутить три и найти его с помощью мыши. Чтобы запустить тест сейчас, вы должны нажать значок выполнения отладки справа от имени теста. Сделав это, VsCode запустит ваш тест и остановит выполнение, когда код достигнет точки останова. Здесь вы можете проверить статус вашего приложения и проблемы в вашем тесте. Используя команду в правом верхнем углу окна VsCode, вы можете продолжить выполнение.
https://youtu.be/68mH0VsjV4M?embedable=true
Как видите, если вы играете с обозревателем тестов, вы можете запускать или отлаживать все тесты или определенный тест. Такой же подход существует и для групп тестов, поэтому вы можете запускать или отлаживать несколько тестов в одном и том же describe.
Хорошо, я потратил целую статью на то, чтобы показать вам, как вы можете запускать или отлаживать тесты с помощью VsCode, потому что много раз я видел людей, которые не знают, как отлаживать, и они тратят много времени на поиск проблемы и исправление теста. Теперь у вас есть все инструменты для отладки тестов с помощью Playwright, поэтому вы можете быстро проверять и исправлять тесты.
Вот и все на сегодня; вы научились запускать и отлаживать тесты с помощью Playwright; перед использованием Инспектора драматургов, а затем непосредственно из VsCode. Надеюсь, вам понравится этот контент, и если у вас есть какие-либо вопросы, не стесняйтесь обращаться ко мне.
До скорой встречи, народ
До свидания
:::информация Также опубликовано здесь.
:::
Оригинал