Отладка в headed режиме

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

По умолчанию Playwright запускает тесты в headless (безголовом) режиме, когда браузер работает в фоновом режиме, без визуального интерфейса. Однако для отладки часто требуется работать с браузером в headed режиме. Для этого достаточно изменить параметр запуска браузера.

Пример запуска в headed режиме:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await browser.close();
})();

Здесь параметр { headless: false } указывает на необходимость запуска браузера с графическим интерфейсом. Это позволяет наблюдать, как выполняются действия в тестах, и лучше понять их поведение.

Использование консоли браузера

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

Для подключения к консоли браузера можно использовать метод page.on('console', callback):

page.on('console', msg => {
  console.log(msg.text());
});

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

Использование инструментов разработчика

Playwright интегрируется с инструментами разработчика браузера, такими как Chrome DevTools. Для более глубокого анализа и отладки можно использовать инструменты, встроенные в браузер, такие как сетевые запросы, перехват событий, анализ времени загрузки страницы и профилирование производительности.

Чтобы открыть инструменты разработчика в Playwright, достаточно добавить флаг devtools: true при запуске браузера:

const browser = await chromium.launch({
  headless: false,
  devtools: true
});

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

Пауза в тестах

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

Пример использования паузы:

await page.goto('https://example.com');
await page.pause();

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

Визуализация шагов теста

Для более удобной отладки можно интегрировать Playwright с инструментами визуализации, которые показывают пошаговое выполнение теста. Одним из таких инструментов является Playwright Test Runner, который может отображать в реальном времени, какие действия выполняются на странице.

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

Ручная отладка через API Playwright

Для более детальной отладки можно использовать методы Playwright для взаимодействия с элементами на странице, проверки их состояния и получения дополнительных данных. Например, для проверки наличия элементов на странице или анализа их свойств можно использовать методы page.locator() и elementHandle.evaluate().

Пример поиска элемента и вывода его текста:

const locator = page.locator('h1');
const text = await locator.textContent();
console.log(text);

Этот код извлекает текст первого заголовка на странице и выводит его в консоль. Это полезно, когда нужно проверить, что на странице отображается нужный контент или что действия на странице привели к ожидаемым изменениям.

Захват ошибок и трассировка

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

Для того чтобы отслеживать ошибки на странице, можно использовать событие page.on('error'):

page.on('error', (error) => {
  console.error('Ошибка на странице:', error);
});

Это позволяет ловить ошибки JavaScript, которые происходят в процессе теста, и выводить их в консоль для дальнейшего анализа.

Интеграция с логированием

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

Пример использования Winston для логирования:

const winston = require('winston');

const logger = winston.createLogger({
  level: 'info',
  transports: [
    new winston.transports.Console({ format: winston.format.simple() }),
    new winston.transports.File({ filename: 'test.log' })
  ],
});

logger.info('Тест начался');

Таким образом, логирование помогает фиксировать ключевые моменты в процессе тестирования и облегчает поиск проблем.

Использование видео и скриншотов

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

Для записи видео необходимо добавить параметр recordVideo при запуске браузера:

const browser = await chromium.launch({
  headless: false,
  recordVideo: {
    dir: './videos'
  }
});

В процессе теста будет записано видео, которое можно использовать для анализа и воспроизведения ошибок.

Сетевые запросы и перехват

Для отладки, связанной с сетевыми запросами, можно использовать Playwright для перехвата HTTP-запросов и ответов. Это позволяет отслеживать взаимодействие с сервером и анализировать данные, которые передаются или получаются от веб-сервера.

Пример перехвата запросов:

await page.on('route', (route, request) => {
  console.log('Перехвачен запрос:', request.url());
  route.continue();
});

Перехват и анализ сетевых запросов полезен для отладки проблем с загрузкой данных или взаимодействием с API.

Взаимодействие с элементами на странице

Для точного понимания того, как элементы на странице взаимодействуют друг с другом, можно использовать методы Playwright для манипуляций с DOM. Например, можно изменять значения полей формы, кликаить на кнопки, прокручивать страницу и проверять результат.

Пример клика по кнопке:

await page.click('button#submit');

Это действие имитирует клик по кнопке с ID submit, что позволяет убедиться в правильности работы элемента.

Отладка в headed режиме позволяет детально следить за всеми этапами выполнения тестов и быстро находить ошибки в веб-приложении. Комбинируя разные методы отладки, можно эффективно устранять баги, улучшать стабильность тестов и ускорять процесс разработки.