Book Image

UI Testing with Puppeteer

By : Dario Kondratiuk
Book Image

UI Testing with Puppeteer

By: Dario Kondratiuk

Overview of this book

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.
Table of Contents (12 chapters)

Finding elements

It's time to apply everything we have learned so far. We need to master selectors because our Puppeteer code will be mostly about finding elements and interacting with them.

Let's bring back the login page from our e-commerce app:

Login page

If we want to test the login page, we need to find these three elements: The email input, the password input, and the login button.

If we right-click on each input and click on the Inspect element menu item, we will find the following:

  • The email has the ID email.
  • The password has the ID password.
  • The login is a button element, with the btn and btn-success CSS classes, and the style=" width: 100%;" style.

Puppeteer provides two functions to get elements from the page. The $(selector) function will run the document.querySelector function and return the first element matching that selector or null if no elements were found. The $$(selector) function will run...