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)

Available test runners

There are many types of tennis racquets. Some racquets give you more control. Others give you more power. If you have just started learning how to play tennis, you won't feel any difference. You would if you compared a cheap racquet with a professional one. But you wouldn't be able to say why one is better than the other. You would say that it just feels better.

It's the same with test runners. There are test runners that offer some features. Other runners offer other features. But what's important for us now is to get a test runner that provides us with all the required features to write our automated tests.

Another important thing to mention is that this book is not about "using Puppeteer with X." We are going to pick a test runner after this chapter, but it doesn't need to be the test runner for you. The idea is that you can choose what's best for you, or what your team is using right now. It is also probable that by the time you read this book, a better test runner will have become popular. You should be able to apply the concepts you learned from this book to that test runner.

These are the most common test runners in the market today.

Jest

According to the Jest site (https://jestjs.io/), "Jest is a delightful JavaScript Testing Framework with a focus on simplicity." Pretty nice introduction. Facebook maintains this project, and it currently has over 32,000 stars on GitHub. I'm not saying this is what makes a project a good project, but knowing who is behind a project and its level of community support are some of the things to take into consideration.

Jest has all the features we mentioned before, such as group tests with describe, and each test is an it or test function. You can skip tests with describe.skip, it.skip, or test.skip. You can run only one test with describe.only, it.only, or test.only. You also have beforeEach, afterEach, beforeAll, and afterAll, to run setup and cleanup code.

It also has some features that differentiate it from other runners. It has a Snapshot tool. The snapshot tool would process a React component and return some kind of DOM representation as JSON, which will allow us to test whether the DOM created by the component has changed. Is this a kind of UI test? Sure it is!

Another thing to consider when evaluating a test runner is available plugins. For instance, there is a package called jest-puppeteer, which helps us integrate our tests with Puppeteer. You don't need to use jest-puppeteer. It's just a helper.

There is also a package called jest-image-snapshot, maintained by American Express, which provides a set of tools to perform visual regression tests. In this case, if you want to code visual regression tests, I recommend you to use one of these packages. Managing all the screenshot baselines can be quite tedious.

Mocha

Mocha is another popular framework. It is a community project with over 19,000 stars. Something worth mentioning is that the Puppeteer team uses Mocha.

Mocha also has functions like Jest. It has a describe function to group tests. Tests are it functions. You can skip functions using describe.skip or it.skip, and use describe.only or it.only to run only one test. You also have beforeEach, afterEach, beforeAll, and afterAll, to run setup and cleanup code.

You will also find many plugins for Mocha. You will find mocha-puppeteer and mocha-snapshots.

A recipe you are going to see a lot on the web is Mocha + Chai. Chai is an assertion library that extends the assertions a test runner provides. It lets you express assertions in a pretty specific way:

foo.should.be.a('string');
foo.should.equal('bar');
foo.should.have.lengthOf(3);
tea.should.have.property('flavors').with.lengthOf(3);

There are many other test runners, such as Jasmine by Pivotal Labs with over 15,000 stars, Karma by the AngularJS team with over 11,000 stars, AVA, a community project with over 18,000 stars, and the list goes on.

As I mentioned at the beginning of this section, we just need a good tennis racquet, that is, a good test runner. When you become an expert, you will be able to move from one test runner to another that fits your needs. For the purpose of this book, we are going to use Mocha + Chai.