Skip to main content

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

Отладчик VS Code​

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

running test in debug mode

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

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

error messaging in vs code

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

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

live debugging in VS Code

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

live debugging in VS Code

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

Выберите локатор и скопируйте его в свой тестовый файл, нажав кнопку Pick locator на боковой панели тестирования. Затем в браузере нажмите на нужный элемент, и он появится в поле Pick locator в VS Code. Нажмите 'enter' на клавиатуре, чтобы скопировать локатор в буфер обмена, а затем вставьте его в код. Или нажмите 'escape', если хотите отменить.

Pick locators

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

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

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

setting debug test mode

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

running test in debug mode

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

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

debugging on specific profile

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

choosing a profile for debugging

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

Playwright Inspector​

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

Playwright Inspector

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

Запустите свои тесты с флагом --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

Пошаговое выполнение тестов​

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

Playwright Inspector and browser

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

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

await page.pause();

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

test with page.pause

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

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

live editing locators

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

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

Picking locators

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

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

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

Actionability Logs

Trace Viewer​

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

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

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

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

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

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

Browser Developer Tools with Playwright object

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

await page.pause();

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

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
note

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

Режим с интерфейсом​

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

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

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