What is Cypress?
Cypress is a next generation front end Automation testing tool built for the modern
web applications
How Cypress is Unique from other Automation tools?
Cypress automatically waits for commands and assertions before moving on. No more
async Issues.
Ability to test Edge Testcases by Mocking the server response
Cypress takes snapshots as your tests run. We can hover over each commands in
the Command Log to see exactly what happened at each step.
Because of its Architectural design, Cypress delivers fast, consistent and reliable test
execution compared to other Automation tools
View videos of your entire tests execution when run from the Cypress Dashboard.
Few more point about cypress
Cypress built on Node.js and comes packaged as an npm module,
As it is built on Node.js, It uses JavaScript for writing tests. But 90% of coding can be
done using Cypress inbuilt commands which are easy to understand.
Cypress also bundles with jQuery and inherits many of jQuery methods for UI
components Identification
Cypress Architecture
Most testing tools (like Selenium) operate by running outside of the browser and
executing remote commands across the network. But Cypress engine directly operates
inside the browser. In other words, It is the browser that is executing your test code
Cypress open doors to New Kind of testing with Having ultimate control over your
application (frontend and backend)
Cypress Browser Support:
Chrome
Electron
Firefox & IE
Cypress Components:
Test Runner
Dash Board Service
Step by step Installation
1. Download and install node.js ()
2. Download and install visual studio code
3. Create a project with file package.json
a. package.json exist at the root of the javascript/node project. It holds metadata
of the project and used to manage project dependencies.(Cypress, Jasmine,
chai, framework reporting, etc)
Steps:
Create a folder
Open VSCode terminal and provide ’npm -i init’ command
Install cypress
o npm install cypress (this command will check the package.json
file and instakk )
o npm install cypress - -save -dev will install cypress and add
dependency in package.json file
Test Runner :
Open cypress (There are many ways to open cypress below are the couple of ways)
./node_modules/.bin/cypress open
Configure the project (Will create cypress.config.js file and cypress folder
automatically)
Create Integration->examples folder under Cypress folder
Create js file under Integration->examples folder (This called as spec file)
Add specpattern in cypress.config.js file
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
//specPattern :
'cypress/Integration/Examples/*.js'
specPattern :
'cypress/Integration/Examples/FirstScript.js'
},
});
Save all
Go to Cypress and click on spec to execute the script.
Cypress Documentation : https://docs.cypress.io/guides/overview/why-cypress
Frameworks for javascript : Jasmine, Mocha(Cypress recommends Mocha ) so on
PracticeSites : https://demoqa.com/
https://rahulshettyacademy.com/seleniumPractise/#/
First Testscript :
describe('My First Test', () => {
it('Visits the Kitchen Sink', () => {
cy.visit('https://example.cypress.io')
})
})
Describe : Testsuite
It block : Testcases
Commands :
Cypress Open : ./node_modules/.bin/cypress open
Run all the specs : ./node_modules/.bin/cypress run
./node_modules/.bin/cypress run –headed
./node_modules/.bin/cypress run – browser chrome
Run specific spec :
Framework Architecture :
Fixtures : Folder to maintain testdata
Itegration : Folder to maintains scripts
Plugins : Kind of listners (handles cypress events)
Support : Reusable methods go under support folder
Node_modules : Library
Cypress.config.js : Settings
Element Identification :
Cypress supports only CSS selectors
Id = #idName
Tagname#idname
Class = .ClassName (If class name has spaces inbetween replace space with .)
Tagname.className
Any attribute = tagname[attribute=value]
Use chropath plugin to get css
Intelligence Code completion
/// <reference types="Cypress" />
Resolving promise
Handling Asynchronous
Cypress has intelligence to handling asynchronous nature. They use wrappers
internally and queue the commands to run sequentially.
Every command has a promise that has three states – Resolved, Rejection and pending
https://docs.cypress.io/guides/core-concepts/introduction-to-cypress#Commands-Are-
Asynchronous
As cypress handling promise internally, if we break the syntax of the cypress then we
have to handle the promise
o Example:
o
o CY.LOG(elementText)
o
o cy.get(‘element’).then(function(elementText){
o CY.LOG(elementText.text()
o
o })
Const elementText = cy.get(‘element’).text()
elementText).text()
Const elementText = cy.get(‘element’).text()
In above example text is not cypress command, cypress supports jquery and text is the
jquer command
If cypress command concatenate with another cypress command then promise will be
handled automatically
Alias
