11 Writing UI-based end-to-end tests

 

This chapter covers

  • Writing end-to-end UI tests
  • Eliminating flakiness
  • Best practices for end-to-end UI tests
  • Running tests on multiple browsers
  • Performing visual regression testing

It doesn’t matter how many business books you read or how many successful pastry chefs you talk to—to open your own business, you have to roll up your sleeves and put in the work. Learning about the “good principles” is useful, but without baking and talking to customers yourself, you can’t succeed.

Also in testing, learning about the different tools you can use and understanding their trade-offs is helpful, but, without writing tests yourself, you won’t know how to build reliable software in less time.

In this chapter, you’ll learn how to write UI-based end-to-end tests by testing the application you built in chapter 6. Throughout this chapter, I’ll use Cypress to demonstrate how you can test that application and which advanced techniques you can use to improve your tests’ efficacy.

NOTE

Even though I’ve used Cypress in this chapter’s code samples, I’ll teach you the principles necessary to be able to adapt and apply these the patterns and best practices, regardless of the tools you choose.

You can find the code for these tests as well as the code for the server and client under test in this book’s GitHub repository at https://github.com/lucasfcosta/testing-javascript-applications.

11.1 Your first UI-based end-to-end tests

11.1.1 Setting up a test environment

11.1.2 Writing your first tests

11.1.3 Sending HTTP requests

11.1.4 Sequencing actions

11.2 Best practices for end-to-end-tests

11.2.1 Page objects

11.2.2 Application actions

11.3 Dealing with flakiness

11.3.1 Avoiding waiting for fixed amounts of time

11.3.2 Stubbing uncontrollable factors

11.3.3 Retrying tests

11.4 Running tests on multiple browsers

11.4.1 Using a testing framework to run tests within a browser