Cypress is an automation tool and it is a NodeJS-based framework. This framework supports both JavaScript and TypeScript programming languages. It is an open-source framework and very easy to use and it is popular among the dev community. Cypress can be used for different tests like unit tests, integration tests, end-to-end tests, and API tests. There are also some wonderful in-built functionalities that make the development team fall in love with it because of its usability. In this guide, you will learn how to install Cypress on Windows and perform Automation. Here are some related guides: How to set up a self-hosted speed test server on Ubuntu Linux, how to add or remove folders in Favorites in Microsoft Outlook, how to check graphics card temperature on Windows 11, and how to use the Widgets feature on Windows 11.
Some of these functionalities are screen capture, video recording, and many more. This testing framework also supports cross-browsing testing like Edge, Chrome, and Firefox. It also has a reporting system that is very easy to use. You may read these articles if you want to know How to install and conduct performance testing using Apache JMeter on your Web App, how to Perform Load Test on Mobile App using Apache JMeter installed on your Windows System and the Difference between testing and debugging.
Prerequisites For Installing Cypress on Windows
You must have Node.js installed before going ahead with Cypress installation. Node.js is a JavaScript runtime environment and you can download it from this download page. Once this is installed you can confirm the version by using this command node -version or node –v and you can also confirm the installation of the Node package manager by using this command npm –version. Another thing you need to install is an IDE (Integrated Development Environment) and a code editor like Microsoft’s Visual Studio Code is very good for programming and maintaining project directories.
Install Node.js
1: Download the Windows installer (msi). After downloading the Node.js install it. You can install either the LTS or the Current Version.
Please see how to change the default start page for File Explorer on Windows 11, How To Configure VM Update Management on Azure Stack Hub, and How To Configure VM Update Management on Azure Stack Hub.
While installing you will see the npm package manager also gets installed.
You can confirm the version of the Node.js by using this command
2. The next step is to add Node.js to the environment variables path so that we can run Node.js from anywhere in our system.
Just copy the location where the Node.js is installed.
3. In the Windows search you can search for Variable and click either Edit the system environment variables or Edit environment variables for your account. Both will still land you on the Environment Variables page.
Create System Variable
4. Click ‘New’ under ‘System variables’ and enter any name you want on the ‘Variable name’ field and on the ‘Variable value’ field paste the Node.js location you copied. C:\Program Files\nodejs
5. After entering all the details click OK and you will see the new addition on the system variables.
Create a Working Directory
6. We will now create a blank working folder on the system to save all our Cypress tests. Open the folder and generate the package.json into it. The reason we create a package.json file is that npm reads this file & installs the required software.
In the location, directory enter cmd and hit enter. This will open the folder inside the command prompt and you can now create the package.json file.
The command prompt window has been launched.
7. Now Run the command ‘npm init’ and enter what you want for the package name. I entered cypress_test.
8. After that you can keep hitting the enter key and you will be asked if its OK to create the file. Type yes and hit enter.
If you check the folder you will see that the package.json file is already created.
Open the Package.json file with Visual Studio Code
I opened the package.json with the VScode editor and you will see the default information.
9. It is now time to install cypress. You can google for cypress installation or use this command inside the project folder. npm install cypress –save-dev
What the command npm install cypress will do is it will automatically download cypress and make an entry into the package.json file.
The command –save-dev will save the cypress entry inside package.json. This will install Cypress locally as a dev dependency for your project. Even when you move the project cypress_test to another location the package.json will still contain an entry for cypress.
So you just have to execute the command npm install cypress and not the entire command npm install cypress –save-dev that just needs to be executed only once.Now go to the cypress folder and open the package.json you will now see an entry for the cypress software that we have installed.
10. Open the project folder via your IDE. I will be using Visual Studio Code as my Integrated Development Environment.
By default the package.json is there and if you expand the node_modules folder. There are dependencies that got downloaded automatically when we installed cypress. One of them is the cypress component @cypress.
Please see how to Fix No disks suitable for the cluster were found. How to reinstall Server Manager and disable Server Manager at startup for all users and login user, and How to check the version of Windows ADK
Install Cypress
11. Another way you can install Cypress is through Direct download. You may decide not to use Node or npm in your project or you want just want to quickly test run Cypress then you can download it directly from the CDN.
Please note: Recording runs to Cypress Cloud is not possible from the direct download. This download is only intended as a quick way to try out Cypress. To record tests to Cypress Cloud, you’ll need to install Cypress as an npm dependency.
The Best Practice is to install Cypress with npm because Cypress is versioned like any other dependency and it makes running Cypress in Continuous Integration very simple and easy.12. Launch Cypress by using any of the following commands:
- npx cypress open
- yarn run cypress open
- ./node_modules/.bin/cypress open
- $(npm bin)/cypress open
How to test Cypress on Windows and perform Automation
The Launchpad opens below and testing can start. The Launchpad will guide you with the configuration settings before you start writing your first test.
13. Select your testing type either E2E Testing or Component Testing. Below is the difference between the two.
14. I will be selecting E2E Testing first and in the next step, you will see a set of configuration files for the selected testing type.
If you click on the drop-down you will see the cypress.config.js script
The same JavaScript and json will be added to the project folder and can be displayed on the Visual studio code.
15. Click Continue to launch a browser. You can select the browser of your choice that you prefer to use for your test.
Create a new empty spec
16. After installing and launching Cypress it’s now time to write the first End to End test (E2E). Click on the Create new empty spec button.
17. Once you click it you would see a dialog where you can enter the name of your new spec.
We shall be working with the default name for now
Once the spec is successfully created you can go ahead and close the box.
18. Once the spec file is created you will see it among the list of end-to-end specs. Cypress will always monitor the spec files for any changes and any changes will be displayed immediately.
19. Now click on the new spec and watch how the first test will be launch. The test is about launching the techdirectarchive website. If it passed the website will open and if it failed it will not open. This satisfies the goal of this topic on “how to install Cypress on Windows and perform Automation’.
I hope you found this blog post on how to install Cypress on Windows and perform Automation interesting and helpful. In case you have any questions do not hesitate to ask in the comment section.