Отладка Кукловода

Отключить безголовый режим

Иногда полезно посмотреть, что отображает браузер. Вместо запуска в безголовом режиме запустите полную версию браузера, используя headless: false :

const browser = await puppeteer.launch({ headless: false });

Замедли это

Параметр slowMo замедляет операции Puppeteer на указанное количество миллисекунд. Это еще один способ помочь увидеть, что происходит.

const browser = await puppeteer.launch({
  headless: false,
  slowMo: 250, // slow down by 250ms
});

Захват вывода консоли

Вы можете прослушать событие console . Это также удобно при отладке кода в page.evaluate() :

page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));

await page.evaluate(() => console.log(`url is ${location.href}`));

Используйте отладчик в браузере кода приложения

Существует два контекста выполнения: node.js, на котором выполняется тестовый код, и браузер, выполняющий код тестируемого приложения. Это позволяет отлаживать код в браузере кода приложения; код внутри evaluate() .

Используйте {devtools: true} при запуске Puppeteer.

const browser = await puppeteer.launch({ devtools: true });

Изменить тайм-аут теста по умолчанию

• шутка: jest.setTimeout(100000);
• жасмин: jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
• мокко: this.timeout(100000); (не забудьте изменить test, чтобы использовать функцию, а не '=>' )

Добавьте оператор оценки с отладчиком внутри или добавьте отладчик к существующему оператору оценки:

await page.evaluate(() => {
  debugger;
});

Затем тест прекращает выполнение в приведенном выше операторе оценки, и Chromium останавливается в режиме отладки.

Используйте отладчик в node.js

Это позволяет отлаживать тестовый код. Например, вы можете перейти к await page.click() в скрипте node.js и увидеть, как происходит щелчок в браузере кода приложения.

Вы не можете запустить await page.click() в консоли DevTools из-за ошибки Chromium 833928 . Поэтому, если вы хотите что-то попробовать, вам нужно добавить это в свой тестовый файл.

1. Добавить отладчик; для вашего теста, например: javascript debugger; await page.click('a[target=_blank]');
2. Установите для параметра Headless значение false.
3. Запустите node --inspect-brk , например, node --inspect-brk node_modules/.bin/jest tests .
4. В Chrome откройте chrome://inspect/#devices и нажмите inspect .
5. В открывшемся браузере тестов введите F8 , чтобы возобновить выполнение теста.
6. Теперь ваш отладчик активирован, и вы можете выполнять отладку в тестовом браузере.

Включить подробное ведение журнала

Внутренний трафик протокола DevTools регистрируется с помощью модуля отладки в пространстве имен Puppeteer.

# Basic verbose logging
env DEBUG="puppeteer:*" node script.js

# Protocol traffic can be rather noisy. This example filters out all Network
# domain messages
env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'

Отладка кода Puppeteer (узла)

Используйте НБД :

• npm install -g ndb (или используйте npx ).
• Добавьте отладчик в свой код Puppeteer (узел).
• Добавьте ndb (или npx ndb ) перед тестовой командой. Например: ndb jest или ndb mocha (или npx ndb jest / npx ndb mocha ).
• отлаживайте тест внутри Chrome как настоящий босс!