NAV
Home
Javascript snippet

Puppeteer Examples

Puppeteer is popular Node library for web browser automation to simulate user interaction and application rendering in real web browser. It is used by many companies for End-to-end (E2E) testing by their Quality Assurance / DevOps teams.

Our REST API allows you to submit Puppeteer JavaScript fragement to geographic region of your choice. We will start Chrome web browser for you and start executing test script. If any of steps fails or throws exception we will automatically mark your test as failed. Test is successful if your script runs all steps without errors / exceptions.

All infrastructure is managed by us and allows you up to 30 parallel tests and location selection for each test run.

Below are some script examples which can be adapted for your use case. If you have additional questions you can always contact us.

NOTE: You don’t have to place JavaScript code inside function, you can just start writing code as shown in examples. For each test run you will receive initialized Puppeteer page object via execution context and can be used immediately.

Open web page

This is very basic example which demonstrates how to open web page and check if page title matches expected text.

// You will receive initialized Puppeteer page
// object via execution context, just use it :)
await page.goto('https://example.com/');
const title = await page.title();
// Fail test if title is not 'Example Domain'
assert.equal(title, 'Example Domain');
// We are adding some diagnostics message
context.result.addTrace('Yay, test succeeded !!!');

Step by step diagnostics

Test demonstrates how to write diagnostic messages before each step. For each trace entry you will also get information how long did it take since test start.

context.result.addTrace('Opening page ...');
await page.goto('https://example.com/');

context.result.addTrace('Getting title ...');
const title = await page.title();

context.result.addTrace('Asserting title: ' + title + ' ...');
assert.equal(title, 'Example Domain');

context.result.addTrace('Yay, test succeeded !!!');

Getting page HTML

await page.goto('https://example.com/');
const html = await page.content();
context.result.addTrace(html); //save HTML output to response trace

Waiting for page to load

When loading your page you can specify waitUntil condition to:

load event

Consider navigation to be finished when the load event is fired.

await page.goto('https://example.com/', {waitUntil: 'load', timeout: 15000});

DOMContentLoaded event

Consider navigation to be finished when the DOMContentLoaded event is fired.

await page.goto('https://example.com/', {waitUntil: 'domcontentloaded', timeout: 15000});

networkidle0

Consider navigation to be finished when there are no more than 0 network connections for at least 500 ms.

await page.goto('https://example.com/', {waitUntil: 'networkidle0', timeout: 15000});

networkidle2

Consider navigation to be finished when there are no more than 2 network connections for at least 500 ms.

await page.goto('https://example.com/', {waitUntil: 'networkidle2', timeout: 15000});

Delaying step execution

You can delay test execution for N milliseconds by calling waitFor method with N parameter:

await page.goto('https://example.com/', {waitUntil: 'domcontentloaded', timeout: 15000});

// wait for 1 second
await page.waitFor(1000);

const title = await page.title();
assert.equal(title, 'Example Domain');
context.result.addTrace('Yay, test succeeded !!!');

Getting page thumbnail

await page.goto('https://example.com/');
await context.result.thumbnail(); //save thumbnail to response as Base64 encoded image

Getting page screenshot

await page.goto('https://example.com/');
await context.result.screenshot({width: 800}); //save screenshot to response as Base64 encoded image

Detection of broken resources

This script registers page response interception and will fail if any page resource (image, style, JavaScript, …) returns HTTP status 4xx or 5xx. Response interception is registered with page.on(‘response’).

NOTE: Interception must be registered before page navigation.

let badResponses = []; //we will use this array to save bad server responses with statuses 4xx, 5xx

//register response interception before navigating to page
page.on('response', response => {
                if (response.status() >= 400) {
                badResponses.push(response);
    }
});

//now we can open page, badResponses array should be filled if there are any issues
await page.goto('https://www.appbeat.io/', {waitUntil: 'domcontentloaded', timeout: 15000});

if (badResponses.length > 0) {
                //there are some bad responses, report first one
    assert.fail('Received status ' + badResponses[0].status() + ' for ' + badResponses[0].url());
}

//everything was OK
context.result.addTrace('Yay, test succeeded !!!');

Detection of timed out requests

Failed requests can be intercepted with page.on(‘requestfailed’).

NOTE: Interception must be registered before page navigation.

let failedRequests = []; //we will use this array to save failed requests

//register failed request interception before navigating to page
page.on('requestfailed', request => {
                failedRequests.push(request);
});

//if there is any failed request, for example timeout, exception will be thrown
await page.goto('https://www.appbeat.io/', {waitUntil: 'domcontentloaded', timeout: 15000});

if (failedRequests.length > 0) {
                //there are some bad requests, report first one
    assert.fail(Request failed for ' + failedRequests[0].url());
}

context.result.addTrace('Yay, test succeeded !!!');

Advanced: check login error

This test checks if correct error message is displayed if user doesn’t enter password field.

Demonstrated concepts:

await page.goto('https://my.appbeat.io/manage/', {waitUntil: 'domcontentloaded', timeout: 15000});

//wait for some test elements to display
await page.waitForSelector('#loginUsername', {visible: true});
await page.waitForSelector('#loginPass', {visible: true});
await page.waitForSelector('#btnLogin', {visible: true});

//enter some username in text field
await page.type('#loginUsername', 'SomeUsername');

//click on Login button
await page.click('#btnLogin');

//we are expecting error because we didn't enter password --> wait for error to display
await page.waitForSelector('#loginError', {visible: true});

//check if correct error value is displayed
const errorValue = await page.evaluate(() => document.querySelector('#loginError').innerText);
assert.equal(errorValue, 'Password is required to login');

context.result.addTrace('Yay, test succeeded !!!');

Need help?

Customer support

If you are our customer you can always reach us for more help with your tests.