Installing Cypress
1. Navigate to the directory where your App is created, then, you can install cypress by writing in the terminal
> npm install cypress --save-dev
Note: Unlike packages that are "required" to use your App, which are installed using npm install and added as dependencies under packages in the package.json. Packages installed with --save-dev are required to help the development of your App and are listed under the devDependencies property.
2. Verify Cypress installation
> npx cypress verify
3. After Verifying the installation of cypress, you can run it by writing in the terminal
> npx cypress open
Note: NPX (Node Package Execute) is installed automatically with the npm (starting from version 5.2.0). It is an npm package runner that can execute any package you want from the npm registry without even installing that package.
On opening Cypress, the Launchpad will run (Figure 1).
Figure 1. Cypress Launchpad
If this is your first time using Cypress it will take you through the following steps in order.
(1) Choosing a testing type: as shown in Figure 1, you have two options:
- E2E Testing allows for running the whole application and visiting pages to test them.
- Component Testing allows for mounting individual components of my app and tests them in isolation.
(2) Choosing a browser. After choosing a testing type, you will be presented with the list of compatible browsers Cypress found on your system (Figure 2).
Figure 2. Choosing a browser
(3) Select the browser you prefer, press start E2E testing, and the testing environment will open in the browser you have just chosen as shown in figure 3:
Note: When you create your first spec, you will be asked if you want to use an example or create a new empty spec, select the latter.
Figure 3. The testing environment
Note: after starting the E2E testing, you can see the Specs (tests) under cypress/e2e (see Figure 3). Moreover, a new folder (e2e) will be created under the cypress directory in your IDE, where we can create your tests (Specs).
(4) Press on spec.cy.js in the testing environment to see how the testing works, the test will load, run, and hopefully pass.
(5) Any test you define within cypress/e2e in your IDE will show up under cypress/e2e in the testing environment as shown in Figure 3. To run any of these test cases, you just need to press on it, and it will run and show you the results of the testing.