UI Testing with Puppeteer

Implement end-to-end testing and browser automation using JavaScript and Node.js

Dario Kondratiuk

• Publisher: Packt Publishing
• Year: 2021
• ISBN:
  9781800203761
• Edition: 1
• Topic: Computer Science
• Subtopic: Quality Assurance & Testing
• Index: Computer Science

Write fail-safe automation tests, device emulation, and browser automation using Puppeteer's Google-powered API

Key Features

• Get up and running with Puppeteer and discover best practices for automation testing
• Automate your modern web applications using Jest and Mocha with Puppeteer
• Generate screenshots using Puppeteer and find out how they can be used for UI regression tests

Book Description

Puppeteer is an open source web automation library created by Google to perform tasks such as end-to-end testing, performance monitoring, and task automation with ease. Using real-world use cases, this book will take you on a pragmatic journey, helping you to learn Puppeteer and implement best practices to take your automation code to the next level!

Starting with an introduction to headless browsers, this book will take you through the foundations of browser automation, showing you how far you can get using Puppeteer to automate Google Chrome and Mozilla Firefox. You'll then learn the basics of end-to-end testing and understand how to create reliable tests. You'll also get to grips with finding elements using CSS selectors and XPath expressions. As you progress through the chapters, the focus shifts to more advanced browser automation topics such as executing JavaScript code inside the browser. You'll learn various use cases of Puppeteer, such as mobile devices or network speed testing, gauging your site's performance, and using Puppeteer as a web scraping tool.

By the end of this UI testing book, you'll have learned how to make the most of Puppeteer's API and be able to apply it in your real-world projects.

What you will learn

• Understand browser automation fundamentals
• Explore end-to-end testing with Puppeteer and its best practices
• Apply CSS Selectors and XPath expressions to web automation
• Discover how you can leverage the power of web automation as a developer
• Emulate different use cases of Puppeteer such as network speed tests and geolocation
• Get to grips with techniques and best practices for web scraping and web content generation

Who this book is for

The book is for QA engineers, testing professionals, and frontend web developers alike who want to perform end-to-end testing using Google's developer tools. Web developers who want to learn how to use Puppeteer for generating content, scraping websites, and evaluating website performance will also find this book useful. Although knowledge of Node.js isn't necessary, basic JavaScript knowledge will assist with understanding the concepts covered.

Chapter 1: Getting started with Puppeteer

I remember the first time I heard about browser automation. A friend told me that their QA team was testing using "automation." That sounded magical to me. People testing websites using "automation." After a few years, I learned that automation wasn't a magic potion, but instead a powerful tool not only for QA but also for developers, because we developers love to automate stuff, right?

That's why in the first part of this chapter, I want to show you how browser automation works and what makes Puppeteer unique. In the latter part of this chapter, we are going to review some asynchronous techniques that are going to be useful throughout the rest of the book, and throughout your automation journey.

This chapter will cover the following topics:

• What is browser automation?
• Introducing headless browsers
• Puppeteer use cases
• Setting up the environment
• Our first Puppeteer code
• Asynchronous programming in JavaScript

What is browser automation?

If you go and look for the word "automation" in Wikipedia, it will tell you that it is "a process or procedure performed with minimal human assistance." If you are a developer, or just a geek, I bet you love to create scripts to automate tasks. You might also create environment variables, so you don't have to type long paths, or even create cool Git commands, so you don't need to remember all the steps required to create a new branch upstream.

When I got my first Mac, I discovered an app called Automator. I fell in love with it. You can automate tasks and connect applications just using drag and drop. If you use macOS and you've never played with Automator, please give it a try! But Automator isn't the only app. There are many workflow apps in the market, such as Hazel or Alfred.

Automation is even in the cloud and is available to the general public. Apps such as IFTTT and Zapier allow users to automate everyday tasks. You can create automations such as "When I post on Instagram, share the same image on Twitter," all from your phone. Regular people doing automation, that's great!

We also have mail rules. Most mail clients, even web clients, let you create rules, so you can mark emails as read, label them, or even remove them based on conditions. That's also automation.

Maybe you've taken it to the next level and coded an application for some of your daily tasks. You have that report that you need to send to your boss every month. That report is the result of many CSV files. You just wrote a tiny app, using your favorite language to make that report for you.

In a few words, automation means using an app to do a repetitive task for us. And as we have seen, it doesn't necessarily involve coding that app. So now, we can say that browser automation is telling an app to do a repetitive task in the browser for us.

Ok, that's a simple statement. But how's that possible? When you automate an app, you accomplish this using some kind of application program interface (API). For example, when you write a bat/bash file, you use the command-line arguments as an interface. If you use IFTTT, it employs Twitter's and Instagram's HTTP APIs to fetch images and create tweets. You need some kind of API, some way to interact with the app you are trying to automate. How are we supposed to interact with the browser? Good question.

To make things a little bit more complicated, we also need to consider that we have two apps to automate: the browser itself and the website. We don't want just to open a browser, create a new tab, and navigate to a page. We also want to go to that page and perform some actions. We want to click on a button, or enter some text in an input element.

Automating a browser sounds challenging. But, luckily for us, we have some brilliant people who did an excellent job for us and created tools such as Selenium and Puppeteer.

Selenium and Puppeteer

A quick search on Google will show that Selenium is one of the top, if not the top, UI testing tool on the market. I think a question many people would ask is: Why should I choose Puppeteer over Selenium? Which one is better?

The first thing you need to know is that Puppeteer was not created to compete with Selenium. Selenium is a cross-language, cross-browser testing tool, whereas Puppeteer was created as a multi-purpose automation tool to exploit all the power of Chromium. I think both are great automation tools, but they tackle browser automation in two different ways. They are different in two important aspects that define the target audience of a browser automation library:

• The interface between the tool and the browser
• The interface between the tool and the user

Let's first unpack how Selenium works.

Selenium's approach

In order to automate most browsers in the market, Selenium wrote a spec (an API) called WebDriver, which the W3C then accepted as a standard (https://www.hardkoded.com/ui-testing-with-puppeteer/webdriver), and asked the browsers to implement that interface. Selenium will use this WebDriver API to interact with the browser. If you take a look at the paper at the preceding URL, you will find two words showing up over and over: testing and simplicity. In other words, they defined an API with a clear focus on testing and simplicity and asked the browsers to implement that interface. Cross-browser testing is, in my opinion, the main feature of Selenium.

What is an API?

An API is the set of classes, functions, properties, and events that a library allows us to use. An API is critical for a library's success because it will determine how much you can do with it and how easy (or not) the interaction will be with the library.

The API that Selenium exposes to users is also considered a part of the WebDriver spec, and it follows the same philosophy: it's focused on testing and simplicity. This API provides a layer of abstraction between the user and all the different browsers and provides an interface that will easily...