Headless browser - Puppeteer

> (World Wide) Web - (W3|WWW) > Web - Browser

1 - About

Puppeteer is a headless browser that focuses on Chromium, richer functionality and higher reliability.

Advertising

3 - Example

4 - Integration

5 - API / Doc

6 - Snippet

6.1 - Serialize and Deserialize a date

6.2 - Execute Javascript inside the page

Example with local storage and passing parameters

await page.evaluate(
  (storageKey) => { localStorage.removeItem(storageKey); }, 
  'theKey'
);
Advertising

6.3 - Add a breakpoint

There are two execution context:

  • node.js (running the test code)
  • and the browser (running application code)

6.3.1 - Timeout

If you are going to play with breakpoint, you need to change the timeout accordingly.

In a test file, as jest is available as a global object.

jest.setTimeout(100000);

It will be use in every invocation with the setTimeOut function.

6.3.2 - Node breakpoint

  • Start the browser with a GUI
const browser = await puppeteer.launch({headless: false});
  • Set a breakpoint in your IDE and step over each puppeteer step (open, click,…)

6.3.3 - Browser breakpoint

  • The browser should be start with the devtool
const browser = await puppeteer.launch({devtools: true});
  • Add a breakpoint
await page.evaluate(() => {debugger;});
Advertising

7 - Debug

8 - Documentation / Reference