Puppeteer debugging

Question

Is there any way to debug a puppeteer script? For some reason, one of the buttons is simply not pressed. I tried everything in a different way, and in fact, in another script, they pressed me, but in this I do not.

await page.focus('#outer-container > nav > span.right > span.search-notification-wrapper > span > form > input[type="text"]');
await page.type("Some text");
await page.click('#outer-container > nav > span.right > span.search-notification-wrapper > span > form'); // I am clicking on the form because it did work in the other script

Answer 1

With, async awaityou can set a breakpoint in the line of code and go to the function call.

node inspect testscript.js

testscript.js

...
await page.focus('#outer-container > nav > span.right > span.search-notification-wrapper > span > form > input[type="text"]');
await page.type("Some text");
debugger;
await page.click('#outer-container > nav > span.right > span.search-notification-wrapper > span > form'); // I am clicking on the form because it did work in the other script
...

This will break on the call page.click, and then we can enter the command stepor sin the debugger.

This, of course, is very convenient for IDEs such as Visual Studio Code.

Answer 2

Visual Studio. , - https://code.visualstudio.com/docs/nodejs/nodejs-debugging

Answer 3

: https://github.com/GoogleChrome/puppeteer#debugging-tips : https://github.com/GoogleChrome/puppeteer/issues/868

Answer 4

- , / Github, , , , . , node/puppeteer script , .

Github repo , docker repo .

Answer 5

, click , , Console innerHTML , , .

await element.getProperty('innerHTML ')

Answer 6

, . script :

await page.evaluate(() => {
  debugger;
  const btn = document.querySelector(...);
  btn.click();
});

, :

puppeteer.launch({devtools: true})

Chromium .