Cypress Installation
Amit K Verma
Helping organizations to streamline the Agile scrum and QA processes | CSM | CSPO | QA | IIT Delhi
Cypress comes as a node package. To install cypress we need node on the system. Lets start with step by step information.
Steps to install cypress
1. Open command prompt on windows OS (by using win+R and then type cmd and hit Enter)
2. Check node is installed or not. Run this command:> node -v
This will allow you to know whether node is installed or not.
3. To Install node, Open official node website to download node (https://nodejs.org/en/download)
4. Download
i. .msi installer for your windows type (64 bit in most cases)
ii. .pkg for mac OS
5. Now launch the downloaded installer and the next-next-finish approach to install
6. Allow the required windows permissions for the installer
7. Now open command prompt again and check node version (ref: step 1 and 2)
8. Now it will show you the node version installed on your system from step 5
9. Node comes with npm which is node package manager, you can install any node package with command -> npm install
10. Update the npm version if required. Here’s the command for same: npm install -g [email protected]?(version).?Add sudo prefix to command for mac
11. Now move to the location where you want to setup your cypress project
12. Run command -> npm init
13. This will ask you a few questions, you can skip for now or give the information required like project name, version, description, test command, git repo link, keywords to search with for this project, Author name (usually you or team), license (holding license for this project)
14. Confirm yes to proceed
15. You should be able to see a file package.json?is created in the project folder
16. Now, to install cypress run this command: npm install cypress --save-dev
This command with install the latest version of cypress and save the dependencies in package.json
17. Check the cypress version installed using this command -> npx cypress --version
18. This should have created a few files and folders on the installation path. Which are:
领英推荐
19. Now run the very first command of cypress to open the runner and create further folder structure of cypress framework. Run ->?npx cypress open
20. If you are running installed version for the first time. First message will appear like this:
21. Cypress app will launch through this command. This will highlight the updates came in this version, only if you are running this first time.
22. Select Continue
23. Now on the next screen, select E2E Testing, for web automation testing. OR Component testing for developers unit/component testing
24. Next screen will show you the files created with Cypress e2e testing
25. Now cypress will ask you to choose the browser based on your installed browsers.
26. Chrome will open which is run by cypress. Select ‘Scaffold example specs’ to create some default test files that comes with cypress. Those can be used for learning.
27. Select any file from the list. Cypress will run that file on the chrome browser, as shown below:
28. Now a few more files will be created in the project folder. Those are:
Inside project folder
Inside Cypress folder:
Inside support folder:
29. VS Code:?Cypress is best used with Visual studio code. You can simply go to this web page (https://code.visualstudio.com/download) and download the latest version. Then just follow the next-next-finish approach.
Congratulations
Cypress is fully installed on your project folder. Stay tuned for next chapters on explaining folder structure, writing tests and so on…