How to start with Puppeteer Debugging

Debugging is crucial to building reliable browser automation., a library developed by Google, automates browsers like,, and (Nightly). To effectively trouble-shoot and refine your test scripts, Puppeteer offers various built-in instrument, such asheadless toggling, slowMo,DevTools integration, and thedebugger keyword.

These lineament make it easier to identify issues, inspect browser deportment, and better the stability of your automation tests.

This article discusses how to use Puppeteer to Debug your web covering using different methods, examples, and codification.

How to debug examination using Puppeteer?

Puppeteer furnish multiple ways to debug, as advert below. Before proceeding, take a look at the prerequisite:

Pre-requisites

• Install NodeJS
• Install Visual Studio Code(Recommended)

1. Disable Headless Mode to Debug Puppeteer Tests

Puppeteer provides an option to handicap brainless modality, where we can see what is pass in the browser visually. When you are found the browser inside your puppeteer codification you can set the headless selection to false.

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

If you are using Jest Puppeteer you can set the headless args to false as seen below injest-puppeteer.config.jsfile.

// jest-puppeteer.config.js module.exports = {launch: {headless: false,product: 'chrome ', args: [' -- start-maximized '], defaultViewport: {breadth: 1700, height: 800},}, browserContext: 'default ',}

2. Slowdown Execution Speed to Debug Puppeteer Tests

The puppeteer is known for faster execution you can slow down the execution swiftness in Puppeteer using theslowMoalternative in Puppeteer. TheslowMolead values in msec. TheslowMovalue can be provided at the time of launching the browser

Example:

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

If you are using Jest Puppeteer you can specify value injest-puppeteer.config.jsconfig file

// jest-puppeteer.config.js module.exports = {launching: {headless: false, production: 'chrome ', args: [' -- start-maximized '], defaultViewport: {breadth: 1700, height: 800},slowMo:250}, browserContext: 'default ',}

The above code will retard down the performance by 250 milliseconds.

3. Puppeteer Debugging Using Console.log ()

Puppeteer test scripts allow you to putconsole.log ()anywhere inside the test code. By doing so you can print the desired content or value. This helps in debugging your tests.

Example:

describe ('Browserstack Demo ', () = & gt; {it ('Should Verify Forgot Password ', async () = & gt; {await page.goto ('https: //browserstack.com ') let element = await page. $ (' a [href= '' /users/sign_in ''] ') let value = await page.evaluate (el = & gt; el.textContent, component) await page.waitForTimeout (6000); console.log (`` CONSOLE LOG DEMO: '', value)})})

The above example, specifiesconsole.log ()at the end to print the values.

After execution, it looks like the below.

4. Set DevTools Flag to Debug Puppeteer Code

Chrome DevTools helps with innovative debugging, such as network requests, browser console logs, etc. We can launch the chrome browser by enabling the dev tools flag.

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

If you are using puppeteer-jest, you can specify the dev tools flag in the configuration file like below.

// jest-puppeteer.config.js module.exports = {launching: {headless: false, product: 'chrome ', args: [' -- start-maximized '], defaultViewport: {width: 1700, height: 800},devtools: true}, browserContext: 'default ',}

The above configuration launches the Chrome browser with the dev tools tab unfastened, which helps in innovative debugging.

5. Jest Puppeteer Debugging by Setting Default Timeout

Puppeteer let you to modify the default timeout option. If you are using Jest the default timeout is 5 secant, we can modify this behaviour withjest.setTimeout () function.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Example:

describe ('Browserstack Demo ', () = & gt; {jest.setTimeout (50000); it ('Should Verify Something ', async () = & gt; {//your code hither})})

Note:

• A similar option is available in Mocha and Jasmine Framework as well.
• Mocha set timeoutthis.timeout (100000);
• Jasmine Set timeoutjasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;

6. Enable Verbose Logging for Debugging

The verbose logging can be enabled in puppeteer tests, when you enable this verbose logging, it will log extra information in the console. In Powershell or Visual Studio Code you can execute the below command to enable verbose logging.

$ env: DEBUG= '' puppeteer: * '' npm run test

7. Add debugger keyword in your Puppeteer codification

The debugger; keyword pauses the execution so that you can do additional analysis or debug utilize the debugger keyword in the Puppeteer code. You can put thedebugger;keyword inside your test script and execute the tests.

Step 1:Modify your code with the debugger option

describe ('Browserstack Demo ', () = & gt; {jest.setTimeout (50000); it ('Should Verify Forgot Password ', async () = & gt; {await page.goto ('https: //browserstack.com ') let element = await page. $ (' a [href= '' /users/sign_in ''] ') let value = await page.evaluate (el = & gt; el.textContent, element) await page.waitForTimeout (6000);        debugger;console.log (`` CONSOLE LOG DEMO: '', value)})})

Step 2:Execute your examination with the below dictation

node -- inspect-brk ./node_modules/jest/bin/jest.js -- runInBand ./tests/demo.console.test.js

Step 3:Once you Enter the above bidding navigate tochrome: //inspectin your chrome browser.

Step 4: Click on Open consecrate DevTools for Node

Step 5:Choose thelocalhost with portfrom the new NodeJS DevTools window

The localhost is usually something like localhost:9229.

Step 6:Once you select the localhost, the new tab bulge up in the paused province, click theplaybutton to continue.

Step 7:Debug the test once it pauses. Once you click on the play button the trial depart executing and it willpausewhen the debugger; keyword encounters. You can get debug from thither.

Step 8:Resume the script execution with F8 or the like play push.

8. Integrate Node debugger with Visual Studio Code for Puppeteer Debugging

Puppeteer exam can be incorporate with Visual Studio Code for debugging easily.

How to Integrate Visual Studio Code (VSCode) for Puppeteer Test

Step 1:In Visual Studio CodeRunMenu, Navigate toAdd Configurationand ChooseNodeJS

Step 2:The nonpaymentlaunch.jsonfile creates inside the.vscodedirectory.

Step 3: Edit the launch.jsonfile with the below code.

{`` version '': `` 0.2.0 '', `` configurations '': [{`` character '': `` node '', `` request '': `` launching '', `` name '': `` Jest '', `` program '': `` $ {workspaceFolder} /node_modules/jest/bin/jest '', `` args '': [`` -- config= $ {workspaceFolder} /jest.config.js '', `` -- detectOpenHandles '', `` -- colors ''], `` internalConsoleOptions '': `` openOnSessionStart '', `` skipFiles '': [`` & lt; node_internals & gt; / * * '']}]}

Step 4:Put the breakpoint in Visual Studio Code and Execute. Put the breakpoint inside the VS Code for your desired test and desired codification or line, and start the execution withF5 or Run & gt; Start debugging option

Step 5:The above command launches the test and pauses when the breakpoint is encountered. Use the step into/step over and resume choice for your debugging.

9. Debug Puppeteer Tests with ndb

Before realize how to debug Puppeteer tryout with nbd, its important to cognize what a nbd puppet is:

What is ndb tool?

The ndb is enabled by Chrome DevTools, it provides an improved debugging experience for the NodeJS-based framework. Since puppeteer is a NodeJS-based framework we can make utilize ndb.

To use ndb for Puppeteer Jest Test for

Step 1:Install ndb to your fabric locally using the below bid.

npm install -- save-dev ndb

Or

Install ndb globally using the below command

npm install -g ndb

Step 2:Execute your tryout with ndb command. If you install ndb locally fulfill using below command

npx ndb npm run test

If you establish ndb globally execute use the below command

ndb npm run test

Once you execute above command the ndb window opens that shows all of your test scripts. Set a breakpoint for your test inside your ndb window. Click on the play button. The executing starts and pauses at the breakpoint as see below

Conclusion

When it comes to automation examination, it is important to prove the application on the different operating systems and browser combinations. The application might through errors specifically for some browsers or operating scheme. It is very difficult to procreate the errors topically since we might not have substructure and lay up such a dynamic substructure takes clip and effort.

allows users to test across multiple environments using various operating systems and browser combinations. Browserstack provides accession to 3500+ real device browser combinations, where you can execute your tests under.

effortlessly on with ease and minimal configuration changes.

Related Guides