How to install Cypress, dependencies, Project Setup, and how to get started

Step-by-step guidance to install the necessary software's and dependencies and get expertise on Cypress Automation.  

1) Download and install the Node.js from the below link 

https://nodejs.org/en/download/ 

2) Set Node Home in Environmental variables. 

3) Download and install the Visual Studio Code editor from the below link 

https://code.visualstudio.com/sha/download?build=stable&os=win32-x64-user 

4) Open the Visual Studio Code, go to the menu Terminal and select New Terminal 

5) Create a base Cypress working folder 

6) Go to the working folder 

7) To create a package, use the command "NPM-I INIT" and give enter continuously until it creates an empty package. 

8) You can see the “package. JSON” file created inside the Cypress working folder. 

9) To install the Cypress dependency, go to Terminal and type the command "NPM install cypress --save-dev". This will install the latest version and update the version in the package. 

10) If you want to install a specific Cypress version then use the command "--save-dev [email protected]"  

11) Node Modules will be created under our Cypress working folder 

12) To start the Cypress test runner, type the command "node_modules\.bin\cypress open" 

13) If you receive any Cypress smoke error, then to clear that type the bellow commands one by one and give enter 

Syntax: 

14) Cypress folder will be created inside the Cypress working folder and also Cypress test runner gets invoked. In the test runner, you can see by default it selected the Electron browser, which is a lightweight of Chrome browser. You also have the options to execute the script by selecting the specific browsers which are available in the system. 

15) Understanding the Cypress test writing principles using describe, and it blocks 

16) Create a JavaScript file inside the integration folder and write the scripts using describe, and it blocks 

17) To execute through command prompt, by default it will execute in headless mode by taking the default browser "electron" 

Syntax: 

18) To execute with headed by default script will execute in browser "electron" 

Syntax: 

19) To execute with Chrome browser with headed 

Syntax: 

20) To execute with Firefox browser with headed 

Syntax: 

21) To execute with edge browser with headed 

Syntax: 

22) cypress/fixtures: create a JSON file inside the fixtures folder to maintain the test data for each of the JavaScript files. 

23) cypress/plugins: Used to store the listeners for the project 

24) cypress/support: Used to store the generic methods (Reusable methods) which can be reused across all the test cases. 

Syntax: 

Cypress. Commands. Add ('method name', (parameter1, parameter2)) 

25) To practice, use the below site. It contains all the data entry objects which make you more familiar to Cypress Automation 

https://rahulshettyacademy.com/seleniumPractise/#/ 

26) To get the reference, add the below command as a header in JavaScript file 

///<reference types="cypress" /> 

27) At the end of each java scripting line ";" is not mandatory whereas in Java its mandatory. 

28) Only CSS Selector will support in Cypress. 

Syntax: 

Note: Here tag name is not mandatory for all the above syntax 

29) To traverse from parent to child 

Syntax: 

30) To traverse from specific sibling element, we have the syntax 

31) we can provide the CSS Selector within "" or ''. 

32) To enter some values in the edit box, we should use "type" method 

33) To check the object’s size by using the assertions to validate 

Syntax: 

should is the assertion type of "Chai" 

 34) To get only the visible elements, then we should use after CSS Selector 

Syntax: 

35) If we update our scripts and save, then the script will be automatically executed from Cypress Test Runner. 

36) We can see what happened on every step with screenshot and error messages in cypress 

37) Cypress is asynchronous in nature and there is no guarantee in sequence of execution, but cypress takes care of it. 

38) CY.log is a cypress command, so cypress will show the log in synchronous 

39) console.log is not a cypress command, so cypress will not control this line of execution in synchronous mode. 

40) Aliasing to reuse locators 

Syntax: 

CY('locator').as ('locator element') 

41) Cypress has the ability to manipulate the DOM. To delete the target properties in the attribute 

42) To check the Cypress version 

43) Mouse over events are not supported in cypress, but we use jQuery to overcome these events 

44) To compare the actual string with expected string, we can use expect assertion 

Syntax: 

expect (actual String).to.equal(expected string) 

45) To get one of the attribute values during runtime for the specific tag name, cypress will not support. We should use jQuery for that 

46) To work on frames, need to install will bellow commands 

Syntax: 

Note: Need to import cypress-iframe on the specific JavaScript file 

47) To pause the script for debugging. We have CY.pause() / CY.debug() and once checked we can give resume in Test Runner. 

48) In “cypress.JSON” file, we can maintain Environmental variables 

Syntax: 

"env": {"URL": "www.google.com"} 

In the script we can get this environmental variable  

Syntax: 

49) We can also set Environmental variable in Command Prompt. If we also configure in “cypress.JSON” file, then the command prompt value will be overwritten in cypress.JSON file 

Syntax: 

50) To validate with Assertions, use the below URL and get the exact one which you need 

51) In the Cypress test runner, we have "Runs" menu, by clicking that will provide the unique key and Project ID for your project. In “cypress.JSON” file, project ID will be added automatically 

52) Derive the command line by using the key 

Syntax: 

Note: Result will be saved in the cloud server Cypress Dashboard, where the authorized person will get a mail, whenever the new report is generated including with recorded video. 

53) To get the Mocha Awesome report, install the below dependencies 

Syntax: 

54) To skip a particular, it blocks use skip method