13. End-to-End Testing

Overview

In this chapter, we will look at how to create an End-to-End (E2E) test suite for a Vue.js application with Cypress. In order to write robust tests, we'll look at common pitfalls and best practices such as intercepting HTTP requests and waiting for elements to appear without timeouts.

As we proceed, you will gain an understanding of E2E testing and its use cases. You will see how Cypress can be configured to test a Vue.js application and also interact with and inspect a user interface using it. Throughout the course of the chapter, you will gain familiarity with the pitfalls of arbitrary timeouts and how to avoid them with Cypress' waiting functionality. Toward the end of the chapter, you will also learn when, why, and how to intercept HTTP requests with Cypress.

Introduction

In this chapter, we'll write E2E tests for a highly asynchronous application.

In previous chapters, we've seen how to build complex Vue.js applications and how to write unit tests for them. This chapter will cover how to use Cypress to write E2E tests for a Vue.js application that is highly interactive and uses an HTTP API. We'll see how E2E testing gives you a high level of confidence that an application will work as designed by automating user flows.

Understanding E2E Testing and Its Use Cases

Most developers will have seen a version of the testing pyramid shown in the following figure:

Figure 13.1: A diagram of the testing pyramid

E2E tests fall under the User Interface (UI) testing category. The type of test we'll be looking at in this chapter is automated E2E tests using Cypress.

E2E and UI tests provide a level of confidence higher than unit or integration tests. They're testing the application as used by the end user. The end user doesn't care why or where a bug is happening, just that there is a bug. The where and why of a bug tends to be the concern of unit and system-level tests. Unit and system-level tests check that the internals of a system work as the specification or code describes them. UI-level tests validate that application flows are working as expected.

A strong E2E test suite that runs fast, has few false negatives (where a test fails but the application works), and...

Configuring Cypress for a Vue.js Application

Cypress is a JavaScript E2E testing framework. It's designed to solve the very specific need of writing E2E tests using JavaScript. This is in contrast to other fully fledged browser automation solutions such as WebDriverIO (https://webdriver.io/), Selenium Webdriver (https://www.selenium.dev/), Puppeteer (https://developers.google.com/web/tools/puppeteer/), and Playwright (https://github.com/microsoft/playwright), which are commonly used to write E2E tests.

The big difference with Cypress compared to these other solutions is its singular focus on writing E2E tests (as opposed to generic browser automation). Tests can only be written using JavaScript (Selenium supports other languages), and up until recently, it only supported Chrome (Cypress 4.0 now has support for Firefox and Microsoft Edge as per https://www.cypress.io/blog/2020/02/06/introducing-firefox-and-edge-support-in-cypress-4-0/).

Cypress has a Graphical User Interface...

Summary

Throughout this chapter, we've looked at leveraging Cypress to test Vue.js applications from end to end.

E2E tests in general are useful to give us a high level of confidence that tested flows will work as expected, as opposed to unit or integration tests, which validate that our code works as expected at a much lower overhead.

We've seen how to use Cypress to inspect, interact with, and assert against a UI. We've also shown how Cypress' default wait/retry functionality is a great advantage while writing robust tests.

We leveraged Cypress' HTTP interception library to stub out HTTP requests and make tests more predictable and faster.

Finally, we looked at how to set up visual regression testing with Cypress.

In the next chapter, we'll look at how to deploy a Vue.js application to the web.