Отладка тестов

Отладчик VS Code​

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

Сообщения об ошибках​

Если тест завершается неудачно, VS Code отобразит сообщения об ошибках прямо в редакторе, показывая ожидаемые значения, полученные значения, а также полный журнал вызовов.

Живая отладка​

Вы можете отлаживать свой тест в режиме реального времени в VS Code. После запуска теста с выбранным Show Browser параметром, щелкните любой из локаторов в VS Code, и он будет выделен в окне браузера. Playwright также покажет вам, если есть несколько совпадений.

Вы также можете изменить локаторы в VS Code, и Playwright отобразит изменения в окне браузера в реальном времени.

Выбор локатора​

Выберите локатор и скопируйте его в файл теста, нажав кнопку Выбрать локатор в боковой панели тестирования. Затем в браузере щелкните нужный элемент, и он отобразится в поле Выбрать локатор в VS Code. Нажмите Enter на клавиатуре, чтобы скопировать локатор в буфер обмена, а затем вставьте его в любой части кода. Или нажмите Escape, если хотите отменить.

Playwright проанализирует вашу страницу и определит лучший локатор, отдавая приоритет локаторам role, text и test id. Если Playwright найдёт несколько элементов, соответствующих локатору, он улучшит локатор, чтобы сделать его устойчивым и однозначно идентифицировать целевой элемент, так что вам не нужно беспокоиться о провальных тестах из-за локаторов.

Запуск в режиме отладки​

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

Откроется окно браузера, тест будет запущен и приостановлен в месте, где установлена точка останова. Вы можете выполнить пошаговую отладку тестов, приостановить тест и запустить тесты повторно из меню в VS Code.

Отладка в разных браузерах​

По умолчанию отладка выполняется с использованием профиля Chromium. Вы можете отлаживать свои тесты в разных браузерах, нажав правой кнопкой мыши на значок отладки в боковой панели тестирования и выбрав «Выбрать профиль по умолчанию» в выпадающем меню.

Затем выберите профиль теста, который вы хотите использовать для отладки своих тестов. Каждый раз, когда вы запускаете свой тест в режиме отладки, он будет использовать выбранный профиль. Вы можете запускать тесты в режиме отладки, нажав правой кнопкой мыши на номере строки, где находится ваш тест, и выбрав «Отладить тест» в меню.

Чтобы узнать больше об отладке, см. Отладка в Visual Studio Code.

Инспектор Playwright​

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

Запуск в режиме отладки​

Запустите свои тесты со флагом --debug, чтобы открыть инспектор. Это настраивает Playwright для отладки и открывает инспектор. Дополнительные полезные значения по умолчанию настраиваются при использовании --debug:

• Браузеры запускаются в режиме с отображением
• Значение таймаута по умолчанию установлено в 0 (= нет таймаута)

Отладить все тесты во всех браузерах​

Чтобы отладить все тесты, запустите команду теста со флагом --debug. Это запустит тесты по одному, откроет инспектор и окно браузера для каждого теста.

npx playwright test --debug

Отладить один тест во всех браузерах​

Чтобы отладить один тест на определённой строке, запустите команду теста, затем имя файла теста и номер строки теста, который вы хотите отладить, после чего добавьте флаг --debug. Это запустит один тест в каждом браузере, настроенном в вашей playwright.config, и откроет инспектор.

npx playwright test example.spec.ts:10 --debug

Отладить в определённом браузере​

В Playwright вы можете настроить проекты в playwright.config. После настройки вы можете отлаживать тесты в определённом браузере или мобильном представлении, используя флаг --project и имя настроенного проекта в playwright.config.

npx playwright test --project=chromium --debug
npx playwright test --project="Mobile Safari" --debug
npx playwright test --project="Microsoft Edge" --debug

Отладить один тест в определённом браузере​

Чтобы запустить один тест в определённом браузере, добавьте имя файла теста и номер строки теста, который вы хотите отладить, а также флаг --project и имя проекта.

npx playwright test example.spec.ts:10 --project=webkit --debug

Пошаговая отладка ваших тестов​

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

Запустить тест с определённой точки останова​

Чтобы ускорить процесс отладки, вы можете добавить метод page.pause() в свой тест. Таким образом, вам не придётся выполнять пошаговую отладку каждого действия вашего теста, чтобы добраться до нужной точки отладки.

await page.pause();

После добавления вызова page.pause(), запустите свои тесты в режиме отладки. Нажатие кнопки «Возобновить» в инспекторе запустит тест и остановится только на page.pause().

Редактирование локаторов в реальном времени​

При работе в режиме отладки вы можете редактировать локаторы в реальном времени. Рядом с кнопкой «Выбрать локатор» есть поле, отображающее локатор, на котором приостановлен тест. Вы можете напрямую отредактировать этот локатор в поле Выбрать локатор, и соответствующие элементы будут выделены в окне браузера.

Выбор локаторов​

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

Playwright проанализирует вашу страницу и определит лучший локатор, отдавая приоритет локаторам role, text и test id. Если Playwright найдёт несколько элементов, соответствующих локатору, он улучшит локатор, чтобы сделать его устойчивым и однозначно идентифицировать целевой элемент, так что вам не нужно беспокоиться о провальных тестах из-за локаторов.

Журналы доступности действий​

Когда Playwright приостанавливает выполнение действия «щелчок», он уже выполнил проверки доступности действий, которые можно найти в журнале. Это может помочь вам понять, что произошло во время вашего теста, и что Playwright сделал или пытался сделать. Журнал сообщит вам, был ли элемент видимым, активным и стабильным, разрешился ли локатор до элемента, был ли он прокручен в область видимости, и многое другое. Если доступность действия не достигнута, оно будет отображено как ожидающее.

Просмотр трассировок​

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

Чтобы узнать больше о записи трассировок и использовании просмотра трассировок, ознакомьтесь с руководством Просмотр трассировок.

Инструменты разработчика браузера​

При запуске в режиме отладки с PWDEBUG=console, объект playwright доступен в консоли инструментов разработчика. Инструменты разработчика могут помочь вам:

• Проверьте дерево DOM и найдите **селекторы элементов**
• **Просмотрите журналы консоли** во время выполнения (или узнайте, как прочитать журналы через API)
• Проверьте **сетевую активность** и другие функции инструментов разработчика

Это также установит значения по умолчанию для таймаутов Playwright в 0 (= без таймаута).

Для отладки тестов с помощью инструментов разработчика браузера начните с установки точки останова в вашем тесте, чтобы приостановить выполнение, используя метод page.pause().

await page.pause();

После установки точки останова в вашем тесте вы можете запустить свой тест с помощью PWDEBUG=console.

PWDEBUG=console npx playwright test

$env:PWDEBUG="console"
npx playwright test

set PWDEBUG=console
npx playwright test

После запуска Playwright окна браузера вы можете открыть инструменты разработчика. Объект playwright будет доступен в панели консоли.

playwright.$(selector)​

Выполните запрос к селектору Playwright, используя фактический движок запросов Playwright, например:

playwright.$('.auth-form >> text=Log in');

<button>Log in</button>

playwright.$$(selector)​

То же, что и playwright.$, но возвращает все совпадающие элементы.

playwright.$$('li >> text=John')

[<li>, <li>, <li>, <li>]

playwright.inspect(selector)​

Показать элемент на панели «Элементы».

playwright.inspect('text=Log in')

playwright.locator(selector)​

Создайте локатор и выполните запрос к совпадающим элементам, например:

playwright.locator('.auth-form', { hasText: 'Log in' });

Locator ()
  - element: button
  - elements: [button]

playwright.selector(element)​

Генерирует селектор для данного элемента. Например, выберите элемент на панели «Элементы» и передайте $0:

playwright.selector($0)

"div[id="glow-ingress-block"] >> text=/.*Hello.*/"

Подробные журналы API​

Playwright поддерживает подробное ведение журналов с помощью переменной среды DEBUG.

DEBUG=pw:api npx playwright test

$env:DEBUG="pw:api"
npx playwright test

set DEBUG=pw:api
npx playwright test

примечание

Для WebKit: запуск WebKit Inspector во время выполнения предотвратит выполнение скрипта Playwright и сбросит предварительно настроенные пользовательский агент и эмуляцию устройства.

Режим с отображением браузера​

Playwright по умолчанию запускает браузеры в бессерверном режиме. Чтобы изменить это поведение, используйте headless: false в качестве параметра запуска.

Вы также можете использовать опцию slowMo, чтобы замедлить выполнение (на N миллисекунд за операцию) и следить за процессом во время отладки.

// Chromium, Firefox, or WebKit
await chromium.launch({ headless: false, slowMo: 100 });