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

Отладчик VS Code​

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

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

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

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

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

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

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

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

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

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

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

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

Отладка тестов с помощью Chrome DevTools​

Вместо использования Debug Test выберите Run Test в VS Code. Если включён параметр Show Browser, сеанс браузера используется повторно, что позволяет открыть Chrome DevTools для непрерывной отладки тестов и веб-приложения.

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

По умолчанию отладка выполняется с использованием профиля 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 проанализирует страницу и определит лучший локатор, отдавая предпочтение локаторам по роли, тексту и идентификатору теста. Если Playwright найдёт несколько элементов, соответствующих локатору, он уточнит его, чтобы сделать устойчивым и однозначно идентифицировать целевой элемент. Так вам не придётся беспокоиться о сбоях тестов из-за локаторов.

Журналы проверок возможности выполнения действий​

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

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

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

Подробнее о записи трассировок и работе с просмотрщиком читайте в руководстве «Просмотр трассировки».

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

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

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

Чтобы отлаживать тесты с помощью инструментов разработчика браузера, сначала установите в тесте точку останова, приостановив выполнение с помощью метода 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)​

Показать элемент на панели Elements.

playwright.inspect('text=Log in')

playwright.locator(selector)​

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

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

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

playwright.selector(element)​

Создаёт селектор для указанного элемента. Например, выберите элемент на панели Elements и передайте $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 во время выполнения остановит дальнейшее выполнение скрипта Playwright и сбросит предварительно настроенные эмуляцию пользовательского агента и устройства.

Режим с видимым браузером​

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

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

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