Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
In this tutorial, we’ll learn what testing is, the different types of testing, and then we’ll use Puppeteer to perform end-to-end testing on our application. By the end of this tutorial, you should be able to end-to-end test your apps easily with Puppeteer.
For this tutorial, you need a basic knowledge of JavaScript, ES6+ and Node.js.
You must also have installed the latest version of Node.js.
We’ll be using yarn throughout this tutorial. If you don’t have yarn
already installed, install it from here.
To make sure we’re on the same page, these are the versions used in this tutorial:
In simple terms, testing is a process to evaluate the application works as expected. It helps in catching bugs before your application gets deployed.
There are four different types of testing:
The testing trophy by Kent C Dodds is a great visualization of the different types of testing:
The testing trophy should be read bottom-to-top. If you perform these four levels of testing, you can be confident enough with the code you ship.
Now let’s perform end-to-end testing with Puppeteer.
Let’s bootstrap a new React project with create-react-app, also known as CRA. Go ahead and type the following in the terminal:
$ npx create-react-app e2e-puppeteer
This will bootstrap a new React project in a e2e-puppeteer
folder. Thanks to the latest create-react-app
version, this will also install testing-library by default so we can test our applications easily.
Go inside the e2e-puppeteer
directory and start the server by typing the following in the terminal:
$ cd e2e-puppeteer
$ yarn start
It should look like this:
Our App.js
looks like this:
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
We’ll be testing the App.js
function and the code will be written in App.test.js
. So go ahead and open up App.test.js
. It should have the following content:
import React from 'react';
import { render } from '@testing-library/react'; // 1
import App from './App';
test('renders learn react link', () => { // 2
const { getByText } = render(<App />); // 3
const linkElement = getByText(/learn react/i); // 4
expect(linkElement).toBeInTheDocument(); // 5
});
Here’s what’s happening in the code above:
import
the render
function from the @testing-library/react
package.test
function from Jest, which is our test runner installed by default through CRA. The first parameter is a string which describes our test, and the second parameter is a function where we write the code we want to test.App
component and destructure a method called getByText
, which searches for all elements that have a text node with textContent
.getByText
function with the text we want to check. In this case, we check for learn react
with the case insensitive flag.expect
function to check if the text exists in the DOM.This comes by default when we bootstrap with CRA. Go ahead and open up another terminal and type the following:
$ yarn test
When it shows a prompt, type a
to run all the tests. You should now see this:
Now let’s test this application with end-to-end testing.
Go ahead and install puppeteer
as a dev dependency by typing the following in the terminal:
$ yarn add -D puppeteer
Now open up App.test.js
and paste the following:
import puppeteer from "puppeteer"; // 1
let browser;
let page;
// 2
beforeAll(async () => {
browser = await puppeteer.launch({
headless: false
});
page = await browser.newPage();
await page.goto("http://localhost:3000/");
});
// 3
test("renders learn react link", async () => {
await page.waitForSelector(".App");
const header = await page.$eval(".App-header>p", e => e.innerHTML);
expect(header).toBe(`Edit <code>src/App.js</code> and save to reload.`);
const link = await page.$eval(".App-header>a", e => {
return {
innerHTML: e.innerHTML,
href: e.href
};
});
expect(link.innerHTML).toBe(`Learn React`);
expect(link.href).toBe("https://reactjs.org/");
});
// 4
afterAll(() => {
browser.close();
});
This is what we’re doing in the code above:
puppeteer
package and declare some global variables, browser
and page
.beforeAll
function provided by Jest. This runs before all tests are run. Here, we launch a new Chromium browser by calling puppeteer.launch()
, while setting headless
mode to false
so we see what’s happening. Then, we create a new page by calling browser.newPage()
and then go to our React application’s URL http://localhost:3000/
by calling the page.goto()
function..App
selector to load. When it loads, we get the innerHTML
of .App-header>p
selector by using the page.$eval()
method and compare it with Edit
src/App.js
and save to reload… We do the same thing with the .App-header>a
selector. We get back innerHTML
and href
and then we compare them with Learn React
and https://reactjs.org/
respectively to test our assertion with Jest’s expect()
function.afterAll
function provided by Jest. This runs after all tests are run. Here, we close the browser.This test should automatically run and give you the following result:
Let’s go ahead and make a counter app.
Firstly, edit some CSS by changing App.css
to the following:
.header {
font-size: 56px;
text-align: center;
}
.counter-app {
display: flex;
justify-content: space-around;
}
button {
background-color: navajowhite;
font-size: 32px;
}
.count {
font-size: 48px;
}
Now change App.js
to the following:
import React, { useState } from "react";
import "./App.css";
function App() {
const [count, setCount] = useState(0);
return (
<>
<h1 className="header">Counter</h1>
<div className="counter-app">
<button className="increment" onClick={() => setCount(count + 1)}>
Increment
</button>
<div className="count">{count}</div>
<button className="decrement" onClick={() => setCount(count - 1)}>
Decrement
</button>
</div>
</>
);
}
export default App;
Here, we’re making a simple counter application with two buttons, Increment
and Decrement
. By pressing the Increment
button, the counter gets increased by 1, and by pressing Decrement
button, the counter gets decreased by 1. It looks like this:
Now change the App.test.js
to the following:
import puppeteer from "puppeteer";
let browser;
let page;
beforeAll(async () => {
browser = await puppeteer.launch({
headless: false
});
page = await browser.newPage();
await page.goto("http://localhost:3000/");
});
// 1
test("renders counter", async () => {
await page.waitForSelector(".header");
const header = await page.$eval(".header", e => e.innerHTML);
expect(header).toBe("Counter");
});
// 2
test("sets initial state to zero", async () => {
await page.waitForSelector(".counter-app");
const count = await page.$eval(".count", e => e.innerHTML);
expect(count).toBe("0");
});
// 3
test("increments counter by 1", async () => {
await page.waitForSelector(".counter-app");
await page.click(".increment");
const count = await page.$eval(".count", e => e.innerHTML);
expect(count).toBe("1");
});
// 4
test("decrements counter by 1", async () => {
await page.waitForSelector(".counter-app");
await page.click(".decrement");
const count = await page.$eval(".count", e => e.innerHTML);
expect(count).toBe("0");
});
afterAll(() => {
browser.close();
});
Here, we keep the beforeAll
and afterAll
function the same, as before, where we initialize a browser and go to http://localhost:3000/
in beforeAll
and we close the browser in afterAll
. Then, we do the following:
Counter
is rendered. For that, we wait for the .header
selector to load. Then we use page.$eval()
to get the innerHTML
of .header
selector. And then we finally make the assertion to check if Counter
is rendered..counter-app
selector to load. Then we get the innerHTML
from the .count
selector. We finally compare if the count
is 0
. Notice that we’re using a string
while our state is a number
. This is because innerHTML
always returns a string
..counter-app
selector to load. We then click on the .increment
button. This should increase the state from 0
to 1
. We then get the innerHTML
from the .count
selector. Then we compare it to 1
, as our increment
function should always increase state by 1
..counter-app
selector to load. We then click on the .decrement
button. This should decrease the state from 1
to 0
. Notice that the state was 1
after we clicked the increment
button. We then get the innerHTML
from the .count
selector. Then we compare it to 0
, as our decrement
function should always decrease state by 1
.The result should now look like this:
In this tutorial, we learned about different types of testing — static testing, unit testing, integration testing and end-to-end testing. We then performed end-to-end testing on our boilerplate, bootstrapped with the help of create-react-app
.
Later, we converted the app to a counter application. And finally we performed end-to-end testing on the counter application.
The Puppeteer library useful not only for performing end-to-end testing but also for doing different kinds of browser automation. Puppeteer is backed by Google and is actively maintained, so be sure to check its docs to understand the wide-ranging use cases it offers.
You can find the code for this tutorial on GitHub.
Originally published by Akshay Kadam at https://www.sitepoint.com
#javascript #testing #web-development #puppeteer #node-js