A Front-End Web Developer’s Guide to Testing/

...

/

Learning about Puppeteer’s Advanced Test Automation Capabilities

Learning about Puppeteer’s Advanced Test Automation Capabilities

Learn about the advanced test automation capabilities of the Puppeteer framework.

We'll cover the following...

Measuring code coverage is also considered a powerful capability within software test automation. Like Playwright, Puppeteer JavaScript and CSS code coverage with Istanbul is only supported on Chromium-based browsers.

Puppeteer namespaces

Within the Puppeteer framework, we can utilize the device’s methods, network conditions, and error-handling capabilities.

To perform web application testing on specific devices, including mobile viewports, we can utilize the puppeteer.devices['DEVICE NAME'], page.emulateNetworkConditions(), and page.emulate() methods.

Note: We can find all of the supported page.emulate() APIs with code samples in the documentation.

Now, let’s try navigating to the Packt website using the following code: 

const puppeteer = require('puppeteer');
const iPhone = puppeteer.devices['iPhone 11'];

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        args: ['--no-sandbox']
    });

    const page = await browser.newPage();
    await page.emulate(iPhone);
    await page.goto('https://www.packtpub.com');
    await page.screenshot({ path: 'output/Packtpub.png' });
    await browser.close();
})();
Capturing screenshot of the Packt home page through a Puppeteer JavaScript test

The preceding code snippet simply navigates to the Packt Publishing website on line 12 and emulates it on an iPhone 11 device through a slow 3G network profile specified within the Puppeteer framework. Here is the 3G network profile spec used in the test:

Press + to interact
'Slow 3g': {
    Download: ((500 * 1000) / 8) * 0.8,
    Upload: ((500 * 1000) / 8) * 0.8,
    Latency: 400 * 5,
},

To observe the effect of the 3G network profile in the actual Puppeteer test, please follow these steps:

  1. Run the Puppeteer script: Execute the provided script, which emulates an iPhone 11 and navigates to the Packt Publishing website.

  2. Monitor network throttling: While the script is running, you can observe network throttling (simulated slow 3G network conditions) in several ways:

    1. Page load time: Notice the time it takes for the page to load. Under 3G conditions, it should be slower than usual.

    2. Browser developer tools: If you run Puppeteer in nonheadless mode, you can open the browser’s developer tools to monitor network activity. Here, you’ll see longer times for resources to load, reflecting the 3G network speeds.

  3. View the screenshot: After the script executes, check the packtpub.png screenshot. It shows how the website looks on an iPhone 11 under these conditions.

Prior to closing the browser session, the code for navigating to the Packt website performs a screen capture that is saved under Packtpub.png.

In the context of mobile testing, we can use the page.setViewport() methods and specify a screen resolution using the width and height as required. We can use built-in mobile device specifications. For example, for the iPhone 11 used in the code snippet above, the test uses the specification for that iPhone platform from the previous descriptor to virtualize a slow 3G network connection.

Puppeteer working with elements

To interact with web page elements, Puppeteer uses the page APIs to type text, click, scroll, and conduct other events on the web application under test.

In the following code sample, still on the Packt website, we’re clicking on the book search box and performing a search of JavaScript books together with a screenshot of the JavaScript books landing page. We are using both the type method and waitForNavigation to ensure that the landing page is loaded prior to taking a screenshot: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: ['--no-sandbox']
  });
  const page = await browser.newPage();

  await page.goto('https://www.packtpub.com');

  // Find the search element based on its name attribute
  const searchElement = await page.$('input[name="query"]');

  // Type "JavaScript" into the search element
  await searchElement.type("JavaScript");

  // Submit the form (assuming it's a form-based search)
  await page.$eval('form', form => form.submit());

  // Wait for navigation after form submission
  await page.waitForNavigation({ waitUntil: 'load' });

  // Take a screenshot and close the browser
  await page.screenshot({ path: 'output/Packtpub.png' });
  await browser.close();
})();
Packt JavaScript books landing page screenshot taken by Puppeteer at the end of the test

This Puppeteer script opens the Packt Publishing website, performs a search for ...

Access this course and 1400+ top-rated courses and projects.