End-to-End Web Testing with Cypress

Explore techniques for automated frontend web testing with Cypress and JavaScript

Waweru Mwaura

• Publisher: Packt Publishing
• Year: 2021
• ISBN:
  9781839215636
• Edition: 1
• Topic: Computer Science
• Subtopic: Quality Assurance & Testing
• Index: Computer Science

Get to grips with the Cypress framework and learn how to best implement end-to-end automation testing with JavaScript with the help of expert tips, best practices, and real-world testing examples

Key Features

• Write your first end-to-end test and find out how to modernize your testing environment
• Execute test-driven web development and cross-browser testing using Cypress
• Discover the advantages of using Cypress over Selenium and refactor testing for modern web apps

Book Description

Cypress is a modern test automation framework for web-based frontend apps. Learning Cypress will help you overcome the shortcomings of conventional testing solutions such as dependency graph problems, the steep learning curve in setting up end-to-end testing packages, and difficulties in writing explicit time waits for your tests.

In End-to-End Web Testing with Cypress, you'll learn how to use different Cypress tools, including time travel, snapshots, errors, and console output, to write fail-safe and non-flaky tests. You'll discover techniques for performing test-driven development (TDD) with Cypress and write cross-browser tests for your web applications. As you advance, you'll implement tests for a sample application and work with a variety of tools and features within the Cypress ecosystem. Finally, this Cypress book will help you grasp advanced testing concepts such as visual testing and networking.

By the end of this book, you'll have the skills you need to be able to set up Cypress for any web app and understand how to use it to its full potential.

What you will learn

• Get to grips with Cypress and understand its advantages over Selenium
• Explore common Cypress commands, tools, and techniques for writing complete tests for web apps
• Set up and configure Cypress for cross-browser testing
• Understand how to work with elements and animation to write non-flaky tests
• Discover techniques for implementing and handling navigation requests in tests
• Implement visual regression tests with Applitools eyes

Who this book is for

This book is for automation testing professionals, software and web testers, and frontend web developers who have intermediate-level JavaScript and beginner-level test automation knowledge, as well as for complete beginners who are looking to get started with Cypress and learn how it works. You'll also find this book useful if you are a Selenium tester who wants to migrate to Cypress and leverage its capabilities. An intermediate-level understanding of JavaScript programming and beginner-level knowledge of web testing are required.

Section 1: Cypress as an End-to-End Testing Solution for Frontend Applications

This section focuses on the basic principles and development methodologies that we will use throughout the book. These introductory chapters are essential for understanding more about Cypress, how to set it up, and how it differs from other testing tools such as Selenium WebDriver.

We will first look at how to install and set up Cypress. Then, we will cover the different topics of Cypress' architecture and the differences between Cypress and Selenium. We'll then finally move on to writing our first test, where we will better understand how to properly debug Cypress tests.

In this section, we will cover the following chapters:

• Chapter 1, Installing and Setting Up Cypress
• Chapter 2, Differences between Selenium WebDriver and Cypress
• Chapter 3, Working with Cypress Command-Line Tools
• Chapter 4, Writing Your First Test
• Chapter 5, Debugging Cypress Tests

Chapter 1: Installing and Setting Up Cypress

Cypress is an end-to-end test automation framework built and engineered for modern web applications. It focuses on eliminating inconsistencies in tests by ensuring that you can write, debug, and run tests on the browser without needing additional configuration or additional packages. Cypress works as a standalone application and can be installed on macOS, Unix/Linux, and Windows operating systems either using Hyphenate applications or command-line tools. Cypress was mainly built for developers who write their applications using JavaScript because it can be used to test all applications that run on a browser. In this chapter, we are going to cover the following topics:

• Installing Cypress on Windows
• Installing Cypress on macOS
• Installing Cypress via direct download
• Opening the Cypress test runner
• Switching Cypress browsers
• Adding npm scripts
• Running Cypress tests

By the end of this chapter, you will understand how to properly set up Cypress on both Windows and Mac operating systems and how to run Cypress tests. You will also understand how npm scripts can be used to automate the process of running tests and opening the test runner.

Technical requirements

Cypress can be installed as a standalone application on your computer and can be run on a machine that has at least 2 GB of RAM and that meets any of the following operating system requirements:

• macOS 10.9 and above (64-bit only)
• Linux Ubuntu 12.04 and above, Fedora 21, and Debian 8 (64-bit only)
• Windows 7 and above

In order to use Cypress on one of the operating systems listed here, Node.js 8 or above must be installed first. Node.js is a JavaScript runtime environment that allows JavaScript code to be run outside the browser. Installing Node.js installs npm, which allows us to install JavaScript packages from https://www.npmjs.com/. npm is the default package manager for Node.js, and users can either use it or use third-party package managers such as Yarn. In this section, we will install Cypress on both macOS and Windows operating systems.

Installing Cypress on Windows

In this section, we will install Cypress and Node.js on Windows operating systems so that we can run our tests.

Downloading and installing Node.js

The following steps will guide you through the installation of Node.js:

1. Visit the official Node.js website (https://nodejs.org/en/download/).
2. Select the Windows installer option.
3. Download the installer package.
4. Install the Node.js package by following the instructions on the Node.js website.

Next, let's initialize the project.

Initializing the project

As a best practice, Cypress is installed in the directory where the project is located; that way, we can be sure that the Cypress tests belong to the project. In our case, we will create a folder inside Documents and call it cypress-tests, then navigate to that directory when installing Cypress. We can use the following commands in a Windows PowerShell terminal to create the cypress-tests directory and navigate to it:

$ cd .\Documents

$ cd mkdir cypress-tests

After these commands are run successfully, we will then launch PowerShell and navigate to the directory that we just created with the following command:

$ cd .\Documents\cypress-tests

After creating the directory, we will then initialize an empty JavaScript project by running the following command in PowerShell:

$ npm init –y

This will create a default package.json file that will be used to define our project.

Installing Cypress on Windows

We will now install Cypress using npm in our project directory with the following command:

$ npm install cypress --save-dev

After running this command, you should be able to see the installation of Cypress and the installation's progress. This approach installs Cypress as a dev dependency for our empty project.

For the macOS installation, please refer to the next main section.

Recap – Installing Cypress on Windows

In this section, we learned how to install Cypress on the Windows operating system. We also learned how to use PowerShell to add Cypress to a project and also how to initialize an empty project. In the next section, we will look at how to install Cypress on macOS.

Installing Cypress on MacOS

In this section, I will be using a macOS machine to install both Cypress and Node.js. By the end of this section, you will have learned how to initialize an empty JavaScript project and also how to add the Cypress testing framework to macOS. We will also dive into how we can use either npm, Yarn, or direct Cypress downloads in our projects.

Installing Node.js

The following steps will guide you through the installation of Node.js:

1. Visit the official Node.js website (https://nodejs.org/en/download/).
2. Select the macOS installer option.
3. Download the installer package.
4. Install the Node.js package following the instructions on the Node.js website.

Next, let's initialize the project.

Initializing the project

To install Cypress, we need to navigate to the project folder and install it where w...