Puppeteer

Automated Web Testing and Monitoring with Puppeteer

1. Install Puppeteer using npm or yarn.

npm i puppeteer
    or
yarn add puppeteer

1. Add the Chrome Recorder Extension to your browser.

2. Open your favorite code editor (for example VSCode), and create files under the .js extension.

3. Record the Puppeteer Script. Unlike Playwright, Puppeteer does not have an inbuilt Recorder, but, you can use Chrome DevTools to record browser actions to generate a Puppeteer Script.

1. Enable Recording:

• To access Developer Tools in Chrome, click on the More Options Icon located in the upper right corner and select it from the More Tools option.

• To access the Recorder in Developer Tools, simply click on the More Options Icon and select it from the More Tools option.

After enabling the Recorder, you can start recording browser actions performed on the browser window.

1. Record and Export the Script:

For this example, we will be performing the following actions and exporting the recordings to the Puppeteer Script:

• Start from the Google Search page.

• Search for "PerfAgents".

• Go to the PerfAgents Website.

• Perform a few actions.

To Record, perform the following actions:

• In the Recorder, click 'Create a new recording'.

• Click on 'Start recording'.

• Click 'End recording' to stop recording.

• Click the 'Export' icon to export as Puppeteer.

• Save the Script on your local machine.

1. Integrate with PerfAgents:

After recording, make sure to change the line

const browser = await puppeteer.launch();

to

const browser = await puppeteer.launch({headless: "old", args: ['--no-sandbox']})

To take screenshots, include

await page.screenshot({ path: process.env.BASE_PATH + '/<screenshot name>.png' });

To get screen recording import "PuppeteerScreenRecorder" and initialize recording inside the test block

const puppeteer = require("puppeteer");
const { PuppeteerScreenRecorder } = require("puppeteer-screen-recorder");

(async () => {
    const recorder = new PuppeteerScreenRecorder(page);
    await recorder.start(process.env.BASE_PATH + '/video.mp4'");
    // Add your test script here
})();

To include multiple tests inside a single file, create each test as different functions

const puppeteer = require("puppeteer");

//Test 1
(async () => {
    // Add your test script here
})();

//Test 2
(async () => {
    // Add your test script here
})();

Validated files can be used to advance from the 'Install' step to the 'Frequency' step by uploading them.

Sequence monitoring now supports access to custom variables inside of test files as environmental variables

To use custom variables inside JavaScript or typescript fie

const userName = process.env.USER_NAME