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.

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

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

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

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

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

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

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.