👉 What is Cypress?
It is a next generation Front end automation tool built for the modern web application. Cypress gives you a visual structure of suites, tests, and assertions. Soon you'll also see commands, page events, network requests, and more.



👉 How Cypress is unique from other Automation tools?

ü  Cypress automatically waits for the commands and assertions before moving on. No more async hell.

ü  Explanation: in case if I click on some dropdown so that list will get opened, because of the dropdown list below section radio button or check box is not visible and are hidden so in this condition other automation tool like Selenium or Protractor, you can not click on check box and you will get failure saying the element is not intractable. BUT in case of cypress it force to close the dropdown list and click on that checkbox by setting the attribute.

ü  Ability to test the edge test cases by mocking the server response: it has ability to stop the original response and inject the fake response. Cypress has the ability to automate the network request by We can inject the mock response to our browser and make that environment ready and show the error message that GIT hub or 3IM services getting failed.

ü  Cypress takes the screenshot as your test run.

ü  Cypress delivers fast, consistent and reliable test execution 

ü  We can view video of entire test execution when run from the cypress dashboard.

Cypress built on Node.js and uses Java Script for writing test

👉 How Cypress is different from others automation tools?
Other automation tools like Selenium first invoke the browser’s driver by putting below code:

System.setProperty("webdriver.chrome.driver", "D:\\Browser Binaries\\chromedriver_win32\\chromedriver.exe");

So once we inject all our code in to that Chrome-Driver then this driver interprets our selenium code and then pass our all necessary command to the actual Chrome Browser to execute, so it will not directly execute on browser.

But Cypress engine directly operates inside the browser in other words, it is the browser that is executing our test code. It enable browser to listen & modify the browser behavior at run time by manipulating DOM and alternating network request and response on the fly

👉 Cypress Browser Support:

§  Chrome

§  Electron

§  Firefox & IE

§  Edge

👉 Cypress Component:

§  Test Runner

§  Dashboard service

👉 What is Node.js?
Node.js is an Open source, Cross Platform, backend JavaScript runtime environment that run on the v8 engine and execute JavaScript code outside a browser.

👉 Creating a new Project with use of package.json?

A package.json is a JSON file that exists at the root of our project. So this file will help us to store all metadata relevant to the project and it will help us to manage our project’s dependencies.
we also need:
Cypress 13.3.0
Jasmine 5.1.0
to npm insall

first we create folder
PS C:\Users\sande\ mkdir CypressAutomation
PS C:\Users\sande\ cd CypressAutomation  
PS C:\Users\sande\CypressAutomation> npm -i init   

PS C:\Users\sande\CypressAutomation> npm install cypress –save-dev       



 Once we hit enter the above command then our package.json file get updated with Cypress devDependencies & package-lock.json file.



 

Once we run “node_modules/.git/cypress open” or “npx cypress open” command: (To execute automation script) 


 

it” block should be wrapped under “describe” block

describe block contain Test Suite

it block contain Test Cases

describe('My First Test Suite', () => {

    it('Test case 1!', () => {

      expect(true).to.equal(true)

    })

 

    it('Test case 2!', () => {

        expect(true).to.equal(true)

      })

 

    it('Test case 3!', () => {

    expect(true).to.equal(true)

    })

 

    it('Test case 4!', () => {

        expect(true).to.equal(true)

     })

  })

 

When we run the cypress execution Head Mode means browser will open and we can see the execution

In Headless Execution browser will not be open, It will be handle internally by calling APIs of the browser so that execution we say Headless execution, so test will run but we will not see the browser invocation.

ID

#idname

Class Name

.classname

Tag Name

input

customized with any attribute

tagname[attribute='value']

 

Update configuration in Cypress.config.js which over ride existing behavior

Cypress is Asynchronous in nature and there are no guaranties in sequence of execution but cypress takes care of it by promising, Promising come with rejection, resolved, pending. By using .then() method