Headless Browser Testing with Jest and Puppeteer

It can be tricky to do functional tests on web applications. There are a lot of frameworks on the market to do that (Selenium…) but it generally comes with a lot of configuration and unexpected behavior.

In this article, I will show you how to test very easily and without any configuration your application with Jest and Puppeteer, two strong new comers in the jungle of web frameworks.

For this article, we will use React Create App to start quickly with a new and functional application. You can do the same by installing it with the following command:

npm install -g create-react-app

Then, create the app:

create-react-app headless-testing-app
cd headless-testing-app/

You can now access our app by typing this command in the terminal:

npm start

Jest & Puppeteer

In one hand I have Puppeteer, a Node Library that can control a Headless Chrome browser by writing actions in Javascript files. In the other hand, I have Jest, a “Delightful JavaScript Testing” framework with zero configuration. It will launch our tests written with Puppeteer and show us which tests succeed or fail.

Install Jest with the following command:

npm install --save-dev jest jest-cli

And Puppeteer:

npm install --save-dev puppeteer

Our first test

What our app looks like

For this first test, we will start with an easy one. We will check if the application is really online by looking if “Welcome to React” is present.

We can see in the inspector that this title is contained in a h1 tag with a class named “App-title”.

We are looking for the text in the App-title class

Now, let’s start !

First, we create a __tests__ folder and a file named first_test.js in it. Your files should now look like that:

Delete the App.test.js is the src folder. Jest is designed to search all files containing the word “test” in their name, and we don’t want it to launch this one.

Next, let’s write our first test:

first_test.js

Let’s explain this script…

We start by importing Puppeteer, then we write the test function. This function is declared by Jest and tells him to start a test.

We declare a browser and a page variable that tell to Puppeteer to launch the browser and get a new page. The “headless: false” option is indicated so that we can see the browser while testing.

After that, we tell to the page to navigate to our application hosted at http://localhost:3000/ and wait for the selector (remember, the h1 tag with the class named “App-title”) to appear.

Once the selector is display, we capture the content of the selector in a “html” variable and tell to Jest we want the content to be “Welcome to React”.

Finally, the browser is closed and the test ends.

Launch the test

We can now start the test ! Just write this command in your terminal:

jest

And the magic begins…

Yay!

You can also edit your package.json as follows (add a test script):

package.json

and launch the tests in your terminal:

npm test

Conclusion

We saw how easy it is to write headless tests for any web application with zero configuration and two simple frameworks.

This example was very simple but you can do very advanced tests with this tools. E. g., you can simulate a user navigating on your website and check that everything corresponds to the expected behavior. We will see how to implement such advanced tests with puppeteer in another incoming post.

In between, I strongly encourage you to look at their very well detailed documentation:

Jest: https://facebook.github.io/jest/

Puppeteer: https://github.com/GoogleChrome/puppeteer