Inspiration for This Post

This blog post was inspired by a talk I saw at the Connect.Tech Conference in Atlanta, this year, entitled: “Using Puppeteer to Write End-to-End Tests That Run On The Browser”.

The speaker, Taylor Krusen, gave a great talk on Puppeteer and headless Chrome and using them together to take end-to-end testing to the next level. I’d looked briefly into Puppeteer in the past, but since I couldn’t find any great examples of how to get started with it, I’d passed and chosen to use Cypress.io for my testing needs, instead.

After the talk though, I was inspired to give Puppeteer another shot and I went a step further, figuring out how to run Puppeteer and how to use it with Jest, the testing framework most commonly associated with React. And I want to share that, to hopefully help others get started with their own application testing suites.

What is End to End Testing & Why is it Important

End to end tests make up the smallest part of the testing pyramid, as defined by Google, but they are still a crucial part of it.

Before I dive into how to use Puppeteer for end-to-end testing, I think it’s important to briefly explain what it is and why it’s important for web development today.

Techopedia gives a good definition of end-to-end testing:

End-to-end testing is a methodology used to test whether the flow of an application is performing as designed from start to finish. The purpose of carrying out end-to-end tests is to identify system dependencies and to ensure that the right information is passed between various system components and systems.

Essentially, end-to-end testing replicates, in an automated fashion, exactly what a user could do while interacting with the application or browser. And this is done to ensure the application works properly and as expected.

As web applications get more and more complex and full featured, it becomes harder and harder for manual QA teams to keep up with testing every single piece of functionality each time the application is ready to deploy a new feature. End-to-end testing frameworks were created to take the burden (and repetitive task) of checking functionality out of the hands of people and have machines (which can move much faster than actual users and exactly replicate a test every time) shoulder more of the load.

Ultimately, it still comes down to us, as developers, to ensure our applications work the way we expect, but testing helps us to better ensure we’re not introducing new bugs into our code or compromising existing functionality, which is why it’s so important.

What are Headless Chrome & Puppeteer

The next thing to cover is what exactly are headless Chrome and Puppeteer, and why are they always bundled together?

Puppeteer’s Github and NPM pages do a great job of explaining exactly what Puppeteer is:

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.

It goes on to say Puppeteer runs headless Chrome or Chromium instances by default, which is why they’re always mentioned in tandem.

Most things that you can do manually in the browser can be done using Puppeteer!

Puppeteer was made for Chrome by the Google Chrome DevTools team to help further automated/headless browser testing and make it less painful for the rest of us.

The biggest drawback is that Puppeteer only works with Chrome. I have had the good fortune of working on applications where our users use Chrome exclusively, which made Puppeteer a very good option for end-to-end testing, but if the user base is more varied in its browser preferences, it may be wise to look into other testing frameworks like Cypress.io, TestCafe or Selenium Web Driver.

But today, at least, I get to talk about Puppeteer.

Puppeteer Examples

Now it’s time to get down to the business of getting Puppeteer up and running.

Getting started with Puppeteer is actually incredibly easy — just type npm i puppeteer and you’re ready to go. Yes, it really is that easy. It’s this easy because the Chrome DevTools team conveniently packages each version of Puppeteer with a version of Chromium (the headless Chrome part) that it’s guaranteed to run with.

Please note: Puppeteer requires at least Node v6.4.0, but the examples below use async/await which is only supported in Node v7.6.0 or greater. Just so ya know.

Let’s take a look at what Puppeteer can automate.

If you’d like to play with these examples yourself, you can download my Github repo here.