Getting Started Using Puppeteer & Headless Chrome for End-to-End Testing

Inspiration for ThisPost

T his 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 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

Getting Started Using Puppeteer & Headless Chrome for End-to-End Testing
End to end tests make up the smallest part of the testing pyramid, as defined by Google, but they are still a crucial part ofit.

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

Getting Started Using Puppeteer & Headless Chrome for End-to-End Testing

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 , 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 .

Take a Screenshot of a Page ― saveFileExample.js

Getting Started Using Puppeteer & Headless Chrome for End-to-End Testing

As you’ll see with all these scripts, as long as puppeteer is imported at the top of the file, it’s good to go and all the methods packaged along with Puppeteer like newPage() and browser are instantly available to you.

This first sample script goes to the Google home page and takes a photo of the page and saves it to a.png file inside of the repo named ‘google.png’.

The code is pretty self-explanatory. To begin, a headless Chrome browser is launched, a new page is opened, the URL for that page is set to Google, a screenshot is taken for posterity and the browser is closed. The whole thing is clean, elegant, asynchronous and wrapped within an IIFE ( immediately invoked function expression ) so as soon as the script is called, the function runs.

Create a PDF ― createPDF.js

Getting Started Using Puppeteer & Headless Chrome for End-to-End Testing

The second Puppeteer example goes to a website (the fun retail website, ThinkGeek, in this case) and makes the site page it visits into a PDF.

Similar to the first script, this one sets up Puppeteer, creates a new browser page, goes to ThinkGeek’s website and then uses the page.pdf() method to make a PDF of the whole page. That PDF is once again, saved into the project folder under the name ‘thinkGeek.pdf’. Pretty simple.

Google Something ― searchGoogle.js

Getting Started Using Puppeteer & Headless Chrome for End-to-End Testing
This third example is

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

本文标题:Getting Started Using Puppeteer & Headless Chrome for End-to-End Testing

技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(48)