Testing with Puppeteer - A Complete Guide

In the earlier years of software development, testing was mostly done manually, which could be a time-consuming and tedious process. These days, there are several tools that can help automate the testing process. One such tool is Puppeteer, which allows you to control browsers for testing purposes. This guide will take a really deep dive into what Puppeteer is and how it can be used for web scraping and automation purposes.

What is Puppeteer, and what are its features

Puppeteer is a Node.js library that allows you to control Chrome or Chromium from the command line. Puppeteer can be used for web scraping, automation, and testing purposes. This guide will show you how to use Puppeteer for web scraping and automation purposes.

Also check: Different types of test automation frameworks

Puppeteer is a Node.js library that provides a high-level API to control Chromium or Chrome over the DevTools Protocol. Puppeteer always runs headless by default but can be configured to run full (non-headless) Chrome or Chromium.

Puppeteer offers APIs that allow you to control Chrome or Chromium programmatically. For example, you can use Puppeteer to take screenshots, create PDFs, navigate pages, and more. In addition, Puppeteer can be used for testing purposes. For example, you can use Puppeteer to click on buttons and links, fill out forms, and assert that the expected results are displayed on the page.

Check out: 5 Popular Test Automation Tools for React Native Apps

History of Puppeteer

Puppeteer was initially developed by Google to help developers automate their workflows. For example, if you need to take a screenshot of a website, you can use Puppeteer to do it automatically. In addition, Puppeteer can be used for web scraping and testing purposes.

Puppeteer was first released in 2017. Since then, it has been gaining constant popularity among developers and QA professionals.

In 2018, Puppeteer was updated with a number of new features, including the ability to take screenshots of web pages and generate PDFs.

Puppeteer is an open-source project, which means that anyone can contribute to it. This makes Puppeteer an excellent tool for developers and QA professionals.

Read: Choosing a Test Automation Tool: A Complete Guide

Why is Puppeteer a better testing platform than its peers?

Puppeteer is a great testing platform because it is easy to use, fast, and has a wide range of features.

Puppeteer is easy to use because it is based on the DevTools Protocol, the same protocol used by the Chrome Developer Tools. This means that if you are really familiar with the Chrome Developer Tools, then you will ensure to get up and running with Puppeteer quickly. In addition, Puppeteer has a number of helper functions that make everyday tasks, such as taking screenshots and creating PDFs, easier to do.

Puppeteer is fast because it uses headless Chrome or Chromium. Headless browsers don't have a UI, which means they are faster than traditional browsers. In addition, Puppeteer can run multiple instances of Chrome or Chromium in parallel, which further speeds up the testing process.

Also read: A comprehensive guide to Parallel Testing

Puppeteer has a wide range of features that make it an excellent tool for web scraping and automation purposes. For example, Puppeteer can be used to take screenshots, create PDFs, navigate pages, and more. In addition, Puppeteer can be used for testing purposes. For example, you can use Puppeteer to click on buttons and links, fill out forms, and assert that the expected results are displayed on the page.

Difference between Puppeteer and other testing platforms

Puppeteer is a great testing platform, but it is not the only one. There are a number of different testing platforms that you can use for web scraping and automation purposes.

Difference between Puppeteer and WebKit/Blink

The main difference between Puppeteer and WebKit/Blink is that Puppeteer is a Node.js library that provides a high-level API to control headless Chrome or Chromium, while WebKit/Blink is a layout engine used by Safari and chromium browsers.

Difference between Puppeteer and Selenium

The main difference between Puppeteer and Selenium is that Puppeteer is a Node.js library that communicates with Chrome or Chromium browsers directly over the debugging feature, while Selenium manages browsers over a chromedriver. The chromedriver communicates with the browsers.

Check out: A complete guide to Selenium testing

Difference between Puppeteer and PhantomJS

The main difference between Puppeteer and PhantomJS is that Puppeteer is a Node.js library that provides a high-level API to control headless Chrome or Chromium, while PhantomJS is a headless web browser based on JavaScript and WebKit/Blink.

Difference between Puppeteer and Nightmare.JS

The main difference between Puppeteer and Nightmare is that Puppeteer is a Node.js library that provides a high-level API to control headless Chrome or Chromium, while Nightmare is a JavaScript library to render WebPage using Electron for automating browsers. Selenium can be used with Puppeteer to automate browsers.

Also read: How to Get Started with Automated Browser Testing?

Difference between Puppeteer and Cypress

The main difference between Puppeteer and Cypress is that Puppeteer is a Node.js library that provides a high-level API to control headless Chrome or Chromium, while Cypress is a JavaScript automation framework which provides convenient methods for asynchronous testing.

How to install Puppeteer

Puppeteer is a Node.js library, which means it can be installed using npm, the Node package manager. To install Puppeteer, run the following command:

npm install puppeteer

Once Puppeteer has been installed, you can use it in your Node.js scripts.

Read: Performance testing in web applications

How to use Puppeteer for automation

Puppeteer can be used for automation purposes. In this section, we will be letting you know how to use Puppeteer to automate the process of filling out a web form. We will be using the example of filling out a form on HeadSpin sample code https://github.com/headspinio/blog-samples running on your local.

First, you need to install Puppeteer using npm:

npm install puppeteer

Then, you need to prepare the sample server environment following “Setup” and “Run the local server” sections in the https://github.com/headspinio/blog-samples/tree/main/02-testing-with-puppeteer/README.md:

node server.js

Next, create a file named fill-form.js and add the following code:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  const timeout = 5000;
  page.setDefaultTimeout(timeout);

  try {
    await page.goto("http://localhost:8000");
    await page.waitForSelector(`#fname`, {timeout, visible: true});

    await page.type(`#fname`, "");
    await page.type(`#lname`, "");

    await Promise.all([
      page.click(`input[name="nameSubmit"]`),
      page.waitForNavigation()
    ])
  } catch (err) {
    console.log(err);
  } finally {
    await browser.close();
  }
})();

In the code above, we are using Puppeteer to fill out a form on the sample website that has a first name input field and a last name input field. We are using the type() function to type text in an input field. We are also using the click() function to click on a button and the waitForNavigation() function to wait for the page to navigate to the next url before continuing. The script saves a screenshot by page.screenshot().

Read: Root Cause Analysis for Software Defects

To run the code, type the following command in 02-testing-with-puppeteer:

node test/fill-form.js

How to write and execute tests with Puppeteer

Puppeteer can be used for writing and executing tests. In this section, we will be letting you know how to use Puppeteer to write a test that verifies that the title of a web page is correct. We will be using the example of testing the title of the web page in the sample server.

First, you need to install Puppeteer using npm:

npm install puppeteer

Then, you need to prepare the sample server environment following “Setup”and “Run the local server” sections in the https://github.com/headspinio/blog-samples/tree/main/02-testing-with-puppeteer/README.md:

node server.js

Next, create a file named test.js and add the following code:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  const timeout = 5000;
  page.setDefaultTimeout(timeout);

  try {
    await page.goto("http://localhost:8000");
    await page.waitForSelector(`#fname`, {timeout, visible: true});

    const title = await page.title();
    console.log(title);
  } catch (err) {
    console.log(err);
  } finally {
    await browser.close();
  }
})();

In the code above, we are using Puppeteer to test the title of the web page in the sample server. We are using the title() function to get the title of the page, and then we are using the console.log() function to print it out.

Read: A Comprehensive Guide to Unit Testing

To run the code, type the following command:

node test/title.js

Using Puppeteer for testing web applications

Puppeteer can be used for testing web applications. In this section, we will show you how to use Puppeteer to test the login functionality of a web application. We will be using the example of testing the login functionality of the Facebook website.

Check out: A Complete Guide to Functional Testing

First, you need to install Puppeteer using npm:

npm install puppeteer

Then, you need to prepare the sample server environment following “Setup” and “Run the local server” sections in the https://github.com/headspinio/blog-samples/tree/main/02-testing-with-puppeteer/README.md:

node server.js

Next, create a file named test-login.js and add the following code:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  const timeout = 5000;
  page.setDefaultTimeout(timeout);

  try {
    await page.goto("http://localhost:8000");
    await page.waitForSelector(`#fname`, {timeout, visible: true});

    await page.type(`#email`, "your email");
    await page.type(`#password`, "your password");

    await page.screenshot({path: "./login.png", fullPage: true});

    await Promise.all([
      page.click(`input[name="loginSubmit"]`),
      page.waitForNavigation()
    ])

    const url = await page.url();
    if (url !== `http://localhost:8000/login`) {
      throw new Error(`The URL was not http://localhost:8000/login`);
    }
    console.log(url);
  } catch (err) {
    console.log(err);
  } finally {
    await browser.close();
  }
})();

In the code above, we are using Puppeteer to test the login functionality of the sample website. We are using the type() function to type text in an input field and the click() function to click on a button. We are also using the waitForNavigation() function to wait for the page to navigate to the next page before continuing.

See: How to Make Digital Native App Testing Easier?

To run the code, type the following command:

node test/login.js

How to automate tests with Puppeteer

Automating tests with Puppeteer can help speed up the testing process. This section will let you know how to use Puppeteer to automate the test we created in the previous section.

First, create a file named test-login-automated.js and add the following code:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  const timeout = 5000;
  page.setDefaultTimeout(timeout);

  try {
    await page.goto("http://localhost:8000");
    await page.waitForSelector(`#fname`, {timeout, visible: true});

    // Fill in email and password fields
    await page.type(`#email`, "your email");
    await page.type(`#password`, "your password");

    await page.screenshot({path: "./login.png", fullPage: true});

    await Promise.all([
      // Click on login button
      page.click(`input[name="loginSubmit"]`),

      // Wait for page to navigate to the next page
      page.waitForNavigation()
    ])

    // Get url of the page
    const url = await page.url();
    if (url !== `http://localhost:8000/login`) {
      throw new Error(`The URL was not http://localhost:8000/login`);
    }
    console.log(url);
  } catch (err) {
    console.log(err);
  } finally {
    // Close browser window
    await browser.close();
  }
})();

In the code above, we are using Puppeteer to automate the test we created in the previous section. We are using the fill() function to type in input fields and the click() function to click on a button. We are also using the waitForNavigation() function to wait for the page to navigate to the next page.

Read: Fundamentals of Test Harness

To run the code, type the following command:

node test/login.js

Best practices for optimizing your tests with Puppeteer

You can follow some best practices to optimize your tests with Puppeteer. In this section, we will be letting you know a list of the best practices for optimizing your tests.

• Minimizing the number of actions, you perform in each test is essential. This will help improve the performance of your tests.
• It is vital to use the waitFor* functions wisely. Overusing these functions can slow down your tests.
• It is crucial to parallelize your tests whenever possible. This will help improve the overall performance of your tests.
• It is essential to use the headless mode when running your tests. This will help improve the performance of your tests.
• Always keep your test code up to date with the latest changes in Puppeteer. This will ensure that your tests are running correctly.
• Use the supported Node.js versions by the core team when running your tests. This will ensure that your tests are running correctly.
• Make sure to use a properly configured test runner when running your tests. This will ensure that your tests are running correctly.
• Do not use Puppeteer for web scraping purposes. This is against the Terms of Service of many websites. Do not use Puppeteer for illegal purposes.
• Make sure to read the Puppeteer documentation carefully. This will help you understand how to use Puppeteer correctly. Make sure to read the headless-chrome docs as well.

Puppeteer is a powerful tool for testing web pages and automating browsers. It is an essential tool for developers and QA professionals. By following the above-written best practices, you can optimize your tests and improve the overall performance of your testing process.

HeadSpin Puppeteer Integration

HeadSpin is a mobile user experience testing platform that allows you to test your web pages on real devices. It provides several features, such as simulating different network conditions and capturing video recordings of your tests.

HeadSpin platform uses Puppeteer to provide accurate and up-to-date test coverage for web pages. This helps ensure that your tests are running correctly.

HeadSpin platform integrates with Puppeteer to provide a complete testing solution for web pages. HeadSpin offers a wide range of features and tools to help you test your web pages. It is easy to use, and this makes it an essential tool for developers and QA professionals.

Examples of real-world tests using Puppeteer

In this section, we are going to let you know some examples of real-world tests that have been created using Puppeteer.

Example 1

The first example is a login test for a web page. This test will fill in the username and password fields and click on the login button. Then, it will wait for the page to navigate to the next page.

const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com/login');

// fill in the username and password fields
await page.type('#username', 'testuser');
await page.type('#password', 'testpass');

// click on the login button
await page.click('#login-button');

// wait for the page to navigate to the next page
await page.waitForNavigation();

await browser.close();
})();

Example 2 - 4

The second example is if a web page contains the correct url. This test will navigate to the HeadSpin GitHub top and checks if the url is correct. If the url is not right, the test will fail.

The third example is if a web page contains a specific element, if the page has an element with the id "your-repos-filter". If the placeholder of the element is not expected, the test will fail.

Read: Software testing in the Retail Industry

The fifth example is if a web page contains a specific image. This test will check if the page contains an image with the src "avatars.githubusercontent.com". If the image is not found, the test will fail.

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();

  try {
    const timeout = 5000;
    page.setDefaultTimeout(timeout);

    await page.goto("https://github.com/headspinio");

    const url = await page.url();
    if (url !== `https://github.com/headspinio`) {
      throw new Error(`The URL was not https://github.com/headspinio`);
    }
    await page.screenshot({path: "./github-headspinio.png", fullPage: true});

    const repoTab = await page.$(`a[href$="/orgs/headspinio/repositories"]`);
    await repoTab.click();
    await page.waitForNavigation();

    const placeholder = await page.$eval(`[id="your-repos-filter"]`, el => el.getAttribute('placeholder'))
    if (placeholder !== ”Find a repository…”) {
      throw new Error(`The search placeholder was not 'Find a repository…'. Actual: ${placeholder}`);
    }
    await page.screenshot({path: "./github-headspinio-repos.png", fullPage: true});

    const imgSrc = await page.$eval(`img[alt="@headspinio"]`, async (el) => await el.getAttribute('src'));
    if (!imgSrc.startsWith("https://avatars.githubusercontent.com")) {
      throw new Error(`The image was not an avatar image`);
    }
  } catch (err) {
    console.log(err);
  } finally {
    await browser.close();
  }
})();

These are just some of the large sets of examples of tests that can be created using Puppeteer. There are further possibilities, and we encourage you to explore them.

The sample code “test/github-headspinio.js” contains an example to run the test on a HeadSpin browser.

Conclusion

Puppeteer is a powerful tool for testing web pages and automating browsers. It is an essential tool for developers and QA professionals. In this guide, we have let you know how to use Puppeteer for testing purposes. We have also listed some of the best practices for optimizing your tests with Puppeteer. By following the above-written best practices, you can optimize your tests and improve the overall performance of your testing process.

Read: Why is Cloud Automation Testing gaining popularity?

Thank you for reading this complete guide. We hope this guide has been extremely helpful to you.

Puppeteer Frequently Asked Question (FAQs)

Q: Is Puppeteer free?

A: Yes, Puppeteer is free and open source.

Q: How do I use Puppeteer?

A: You can use Puppeteer by writing code in Node.js that uses the Puppeteer API.

Q: What platforms does Puppeteer support?

A: Puppeteer supports Linux, Windows, and macOS.

Q: Does Puppeteer have a headless mode?

A: Yes, Puppeteer has a headless mode.

Q: What software do one need to install to use Puppeteer?

A: All you need is Node.js and a text editor.

Q: How do I update Puppeteer?

A: You can update Puppeteer by running the following command:

npm install puppeteer@latest

Q: What language does Puppeteer use?

A: Puppeteer uses JavaScript.