Cypress Tutorial
Cypress Installation And Setup
How To Install And Setup Cypress ?
Prerequisites :
Download Node.js and NPM zip from here : https://nodejs.org/en/download/
Extract it at some location.
Set environment variable for extracted folder =>
Copy the full path to node.js folder, goto system properties environment variable, edit path variable in system variables and paste the path there.
To verify installation of -
1. Node.js : Run command "node -v".
2. NPM : Run command "npm -v".
Install a code editor (VS code recommended).
Steps to Setup Cypress in VS code(or an editor) :
Open VS code(or any other editor).
Create a new project folder(CypressAutomation) in the workspace.
Open terminal in the editor.
Navigate to that created directory using 'cd' command.
Initialize the project folder using command - 'npm init -y' (Here '-y' is optional and is used to skip the description).
--> It will create a 'package.json' file within the project folder which contains description about dependencies,versions and other details.
Install cypress using command - 'npm install cypress'.
--> A library named 'node_modules' will be added to your project folder which contains bundled cypress packages.
Run command 'npx cypress open'.
On running this command, if terminal displays a mesaage as ''chcp' is not recognized as an internal or external command,operable program or batch file.' then, don't be worried, you just have to setup environment variable for chcp :
chcp is located in the sub folder 'System32' under Windows folder of C drive i.e. 'C:\Windows\System32'.
To set environment variable, copy the path to chcp (In my case it's 'C:\Windows\System32').
Goto the System Properties, click on Environment Variables.
Under System variables, click on path variable and proceed with Edit.
Now, click on New and paste the copied path there.
Click on OK to save the changes.
To verify it,open cmd and type 'chcp',it will show you an active status, if done successfully.
Steps to Configure and Run a Test in Cypress :
When 'npx cypress open' command is run, a cypress welcome page window will be poped-up.
Click on 'E2E' testing to configure.
Scroll to the bottom and click on 'Continue'.
Choose your preferred browser and click on 'start E2E testing'.
Cypress dashboard window will be displayed on screen which contains UI for your project folder.
Under the Specs option, click on 'Create new empty spec'.
Keep the default path and click on 'Create Spec' , then click on 'Okay, run the spec'.
Test is executing, you can see it in below screenshot :
Run Cypress Test using Command Prompt :
Navigate to the project folder using 'cd' command.
Your project hierarchy will look like this in VS Code :
Run command 'npx cypress open'.
Run the test by running command : ' npx cypress run --spec "cypress/e2e/filename.js" ', i.e. 'npx cypress run --spec "cypress/e2e/spec.cy.js" '
If test is run using cmd, it will record the video of test execution by default which will store within your project folder inside ..\cypress\videos.