Cypress Installation and Framework Structure understanding

Cypress Installation Steps:

• Download Node version 10 and above for Cypress-4 and install.
• Set node home in environmental variable 

• Download Visual Studio code and Install
• Create Cypress workspace and select in visual studio
• In Visual Studio Code terminal execute following commands

1.  Create package.json with command npm init  and enter required information
2. To install Cypress node module: npm install cypress --save-dev: 
   
3. To extract and create cypress structure in workspace and open the Cypress runner: ./node_modules/.bin/cypress open

• Make sure you see folder structure like this

Cypress framework default folder structure:

• Fixtures: Uses to put test data in “.json” format
• Integration: Uses to write all our testcases 
•  Plugins: These are the cypress listener; and cypress events after and before 
•  Support: Uses to write all reusable methods. Here we can add page object models as well
• cypress.json: Uses to overwrite all default cypress configuration
• package.json: uses to add any dependency which are required  

Demo

 

Cypress automatically detects installed browsers on your local system or CI environment. A full list of detected browsers is displayed within the browser selection menu of the Test Runner