Home Web Development End-to-End Web Testing with Cypress

End-to-End Web Testing with Cypress

By Waweru Mwaura
books-svg-icon Book
eBook $35.99
Print $48.99
Subscription $15.99
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
eBook $35.99
Print $48.99
Subscription $15.99
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
  1. Free Chapter
    Chapter 1: Installing and Setting Up Cypress
About this book
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.
Publication date:
January 2021
Publisher
Packt
Pages
240
ISBN
9781839213854

 

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...

 

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...

 

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 we want the Cypress tests to be located. In our case, we will create a folder inside Documents and call it cypress-tests, then navigate...

 

Opening Cypress

Installing Cypress is the first step on the journey of writing end-to-end tests; now, we need to learn how to use the tools that Cypress provides to run the tests using both the graphical user interface and the dashboards. There are four ways to run the Cypress executable that has been installed on your machine. After opening Cypress, you should then see the Cypress test runner. No matter which way you open Cypress, the test runner dashboard that you are presented with is the same. The following sections detail the different ways to open and run Cypress.

Running with Npx

npx is used to execute npm package binaries and comes with all npm versions from version 5.2. Npx can also be installed using npm from npmjs.com. To run Cypress using npx, you need to run the following command:

 npx cypress open

Running with Yarn

If Cypress was installed using Yarn, you can then open Cypress using the following command:

Yarn run cypress open

Running with the node...

 

Switching browsers

Cypress comes with Electron as the default browser on installation, but it can also integrate with other compatible browsers that contain the Chromium project, with the exception of Firefox. Currently, Cypress supports Firefox browsers Chrome browsers, Chromium, and Edge browsers. When launching Cypress, it will automatically find all the compatible browsers on the running machine and you will be able to switch between any of the browsers at any time using the test runner. To switch from one browser to another, you will need to click on the browser button at the top right and choose an alternative browser from the drop-down link.

Cypress tests can also be run or opened on different browsers using the command line, and this can be achieved by specifying the browser while opening the Cypress test runner or running the Cypress tests. All Chromium-based browsers, Edge, and Firefox can be launched using the command line with the following command:

$ cypress run...
 

Adding npm scripts

scripts is a package.json property that gives a user the ability to run commands via the command line in JavaScript applications. npm scripts can be used to add environment variables to the properties of an application, package applications into production-ready bundles, run tests, or automate any other activity in JavaScript applications. npm scripts can either be used as defined by npmjs.com or customized based on the user's preferences and applications. In this section, we will learn how to write npm scripts to run our Cypress tests, to open our Cypress tests, and even to combine different npm scripts to achieve different results.

Opening a Cypress command script

To create a scripts command to open Cypress, you need to write the script name then add the command that npm will run when the script is executed. In this case, our command to open Cypress will be embedded in a script called open. We can achieve this by adding the following command to the scripts...

 

Running Cypress tests

In this section, we will focus on how we can run Cypress tests on the browser. To do this, we will write test scripts that can run the tests similarly to opening Cypress scripts:

"scripts": {
"test:chrome": "cypress run –browser chrome",
"test:firefox": "cypress run –browser firefox" 
}

The preceding scripts will be used to run tests either in the Chrome browser or in the Firefox browser depending on what command the user runs on their command-line terminal. To execute the tests, you can either run npm run test:chrome to run the tests in Chrome or npm run test:firefox to execute the tests in Firefox. The first section of the command instructs Cypress to run the tests in headless mode, while the second section instructs Cypress which browser to run the tests in. Running Cypress tests is not limited to only Chrome and Firefox and can be extended to any browsers that Cypress supports, with the...

 

Summary

In this chapter, we learned about installing Cypress both on Windows and on Mac operating systems. With both installations, we covered installing Cypress as a downloaded application or via the command line. We also covered using either the default package manager that comes with Node.js (npm) or third-party dependency managers such as Yarn. We learned how to utilize the test runner to run our tests and also how to automate our scripts in package.json to help us run our tests effectively. To test our knowledge, we also had an exercise where we practiced running tests in different Cypress browsers.

In the next chapter, we will be diving into the differences between Selenium and Cypress and why Cypress should be the preferred choice. We will be building further on the understanding of Cypress that we have gained in this chapter.

About the Author
End-to-End Web Testing with Cypress
Unlock this book and the full library FREE for 7 days
Start now