Web Testing with Cypress: Run End-to-End tests, Integration tests, Unit tests across web apps, browsers and cross-platforms (English Edition)

By Lev Gelfenbuim

"Web Testing with Cypress" teaches you to test web apps on any browser or platform with zero environment setup in a developer-friendly, end-to-end web testing environment.

When you read this book, you'll be able to create, run and debug test automation scripts in Javascript without wasting any time. You will execute tests in real-time while you create your applications and begin troubleshooting. You will work on Cucumber + TDD/BDD integration, CI testing, Cypress Dashboard, GitHub Actions, and Cypress Docker Images. Advanced topics such as running sequential and parallel tests, load balancing, cross-platform testing and Cypress-Driven Development are also trained in this book. While you master in writing automated tests, you'll also learn about Cypress' time travel, real-time reloads, pictures and videos, network traffic control, and live debugging features.

As you progress through the book, you'll learn about cutting-edge testing methodologies, such as test-driven development (TDD), sanity testing (SST), and left shift testing (LTST). It also includes case studies and easy demos for non-technical users to help them write scripts in simple language to undertake application testing.

• Language: English
• Publisher: BPB Online LLP
• Release date: May 31, 2022
• ISBN: 9789355510365

Book preview

CHAPTER 1

Introduction to Cypress

Introduction

The aim of this chapter is to get familiar with Cypress, to be able to install and set it up on a local machine and to learn how to operate it. Together, we will find out why Cypress was created, we will see how to install it in our environment, understand the default structure of Cypress directories, and will get to know the core concepts Cypress is based on.

Structure

In this chapter, we will cover the following topics:

What is Cypress?

Basic Cypress installation

Directories' structure

Cypress core concepts

Objective

After reading this chapter, you will be able to install and run Cypress on your local machine.

What is Cypress?

Cypress is a set of powerful JavaScript tools that help us test any Web application. If you ask Cypress Team what Cypress is, they describe it this way(1):

The web has evolved. Finally, testing has too.

Fast, easy and reliable testing for anything that runs in a browser.

The motto of Cypress is the first thing we see when visiting their website, as shown in figure 1.1:

Figure 1.1: Cypress homepage

Let us see why.

The Web has evolved

Did you notice that more and more traditional desktop applications have migrated to the Web? What if I tell you that many mobile applications you are running on your smartphone are Web applications? It is true that you have to install an app in order to see the content, but under the hood, many applications have nothing but a Web wrapper around a special version of their website.

Actually, the borderline between native applications (applications that were developed especially for the mobile OS) and Web applications is so thin that it is almost impossible to distinguish between the two without deeper investigation or prior knowledge. I am quite sure that some of your mobile applications are just optimized versions of a Web application.

Today modern browsers are equipped with many APIs that make almost every sensor of your device accessible by the browser.

Following are just a few examples:

The camera, microphone, and other media means can be accessed using MediaDevices(2) API.

The vibration of a mobile device is controllable using the Vibration API(3).

To get user location data (Wi-Fi, cellular, or GPS), there is the Geolocation API(4).

For accessing Bluetooth, there is the novel Web Bluetooth API(5) (experimental at the time of writing).

The modern Web is not just plain HTML which displays colorful texts and images. Today, the Web gives us the opportunity to create amazing applications without deep knowledge of complicated low-level programming languages, without spending hours reading the documentation. That is because the browser provides interfaces, wrapping all those complications for us. The progress in JavaScript and the V8 engine has contributed much to the evolution.

Testing has [evolved] too

Most modern browsers can be run in headless mode. Google Chrome added support for headless in version 59(6), mid. 2017. Mozilla Firefox added it in version 56(7) in the same year, just a few months after Google. When in headless mode, it is possible to control the browser using commands (API) and perform certain browsing tasks. For example:

Navigate to https://google.com.

Write funny cats in the search input element.

Click the Search button.

Make a screenshot of the page.

Fast, easy, and reliable

Cypress is really easy to learn. It provides some really handy tools that help concentrate on the tests instead of the logistics behind them. With rich API documentation, guides, and free courses, Cypress is not yet another framework, and it is a serious candidate for dominating the Web testing market.

Cypress is used by cutting-edge tech companies, among whose we can find Twilio, Snyk, and AirTable, as well as by old-but-gold companies such as Johnson & Johnson, DHL, and Autodesk.

Testing for anything that runs in a browser

Cypress can operate pretty much every modern browser available today. We can look at Cypress as a high-level API that orchestrates multiple browsers for us. And whatever the browser can run, we can test. It is important to remember that Cypress runs inside the browser instead of other testing frameworks that communicate with the browser process and might be affected by performance issues because of that.

Installing Cypress

The installation process is straightforward. It can be installed on most macOS, Linux, and Windows machines.

Prerequisites

For the installation, we would need the following:

Node.js v12 or newer (https://nodejs.org/en/download/). In the course of this book, Node.js v16.6.2 will be used.

npm v6 or yarn (https://yarnpkg.com/lang/en/docs/install/). Those are Node.js package managers. npm is included with the installation of Node.js. In the course of this book, npm v7.20.3 will be used.

Tip: Cypress recommends using npm(8).

For Linux operating system, some additional dependencies might be required. Please refer to https://docs.cypress.io/guides/getting-started/installing-cypress#System-requirements for additional information on installation guidelines. In the course of this book, Windows 10 will be used as the OS.

Installation

When your development environment is ready, run the following command in Terminal or command line:

npm install --save-dev cypress

After running the installation command, normally, we would see an output similar to figure 1.2. Go grab a coffee because the installation may take a couple of minutes, depending on your internet connection and the PC specifications.

Figure 1.2: Installing Cypress using command line

Cypress is now ready to use.

Note: The are other ways to install Cypress. For alternative installation methods, please visit https://docs.cypress.io/guides/getting-started/installing-cypress#Installing.

Directories' structure(9)

Cypress can be used to manage and run tests specs in a local and CI/CD environment. When you run Cypress for the first time, it installs itself in a /cypress directory. The basic structure of a newly created Cypress project is as follows:

cypress

fixtures

example.json

integration

1-getting-started

todo.spec.js

2-advanced-examples

actions.spec.js

aliasing.spec.js

assertions.spec.js

(…)

window.spec.js

plugins

index.js

support

commands.js

index.js

cypress.json

Let us talk about the directories Cypress creates for us:

fixtures: Fixtures are a concept in testing that is used to assert the behavior of a function is given known data.

Example: Our Web application should display an appropriate message when zero results are returned from the back end. In this case, the number of results can be a fixture.

integration: This is the default home of our integration (end-to-end) test specs. Cypress is discovering and running the tests inside the integration folder. It is convenient to group tests by common characteristics.

Example: Login screen specs can be created in the integration/login/directory.

plugins(10): Cypress is an extendable framework. It provides an API for adding more functionality to it. There are dozens of open-source plugins available out there. For example, there is a plugin that extends Cypress to Run tests on multiple URLs at various viewport sizes(11) or a plugin that provides Simple commands that make it easy to target and fill in Stripe Elements input fields(12).

support: By default, there are two files inside. The commands.js and index.js. Commands are going to be discussed in detail later in this chapter. The index.js file is loaded automatically before our test files are run. Usually, we would include the commands.js file in index.js.

cypress.json

The Cypress configuration file. In the configuration file, we can define our web application's base URL (for example, https://example.com), environment variables, number of retries for failed tests, timeouts, and many more. It is also possible to turn off the screenshots and the videos engines. The complete configuration options can be found on the official Cypress guide: https://docs.cypress.io/guides/references/configuration#cypress-json.

Cypress core concepts

Along with the chapters, we are going to use various core concepts. Some of them are unique to Cypress, whereas others are taken from other areas.

Closures

The official(13) definition of a closure is as follows:

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. […]

In Cypress, we can chain multiple commands together so the result of the first command would be available for the second command. A command whose output can be used as input to another command is called Chainable. In addition, each command output can be handled using the Promises' then()(14) method.

Example:

cy.get(div.hl-popular-destinations-image-spacer).then($div => {  // get() is Promise

// we could make assertion on div properties

});

cy.get(.hl-popular-destinations-image-spacer)  // get() is Chainable

.first()    // first() is Chainable

.click()    // click() is Chainable

.then(() => {

cy.get(.b-visualnav__grid > .b-visualnav__tile)

.its(length)

.should(equal, 5);

});

Variables and aliases

Although the concept of the variables is not unique to Cypress, in Cypress, variables can be omitted in most cases. As we will see in upcoming chapters, closures guarantee us access to the yielded objects. Aliases, on the other hand, are part of Cypress API. We can use aliases to perform a certain task or to get a specific resource without repeating the task over and over again.

To create a new alias, we would use the as()(15) command. Every alias can be referred to by a prefix of @.

For example, we could create an alias called firstCategory using the following code:

it(First category alias, () => {

cy.visit(https://www.ebay.com/);

cy.get(select#gh-cat > option).first().as(firstCategory); // The first option will have an alias of @firstCategory

cy.get(@firstCategory).then(($option) => {

expect($option.text().toLowerCase()).equal(all categories);

});

});

Similarly, we can create an alias for a request to the back end:

describe(Uber Eats, () => {

it(Specific restaurant page returns 200 and has a HTML content-type, () => {

cy.request(

https://www.ubereats.com/store/sliders-diner/V-WECNcvT86RbXMhlbyE-g

).as(getStores);

cy.get(@getStores).should((response) => {

expect(response.status).equal(200);

expect(response.headers[content-type]).contains(text/html;);

});

});

});

You may notice the cy object in the preceding examples. The cy is a special object which exposes all the commands. Using cy we are instructing the underlying browser to do the actions we want (for example, navigating to a page, taking a screenshot, clicking a button, and so on).

Commands

Cypress comes with a dozen of built-in commands, as well as an API to create custom commands and extend Cypress functionalities. Once registered, the commands are called directly on the cy object.

Examples of widely used built-in commands:

visit()(16): Changes the address of the underlying browser to a given URL.

get()(17): Returns a DOM element by using either a selector(18) or an alias.

intercept()(19): Allows performing actions when specific Web requests are made. For example, our test can verify that a special POST request is made to the back end when a user fills a registration form. Network interception will be discussed in detail in the next