Test automation with cypress

Cypress is an Open-Source, end-to-end automation testing framework for web application testing. It is completely written in JavaScript, the primary language used by front-end web developers. This allows testers to create powerful and robust web application tests. Unlike any other testing tool, it is browser-based test runners. In this blog let’s see the general outlook of Cypress testing, its advantages, challenges, cheat sheet, etc.,

 

Why Cypress Framework:

 

Most of the testing tools execute remote commands outside the browser. But Cypress is a web-based test runner, and it is performed in the same run loop as the application does. So, it gives end-user experience to both tester and developer.

Setting up Cypress is just a piece of cake, and no additional download is required, it makes test-driven development a reality for end-to-end testing. Cypress framework is not only for end-to-end testing, but also great for the Integration test, Unit test for Isolates Complement, JavaScript Business Logic, and others. Cypress is powered by a Node server process. Cypress and the Node process continuously communicate, synchronize, and do tasks on each other’s behalf. Having access to both the front and back ends allows responding to application events in real-time.

Advantages of Cypress Framework

 

Cypress is written with JavaScript and based on Mocha and Chai. Nowadays, most of the web application front end is written in JavaScript and Cypress tests also written in JavaScript. That makes Cypress more user-friendly for both developers and testers.

While using other automation testing tools, the Tester needed to select all Dependencies and Libraries before the test started. But dependencies and libraries are already present in Cypress and no additional setup is required. Cypress has Network Traffic Control features that help to test edge case scenarios without server involvement.

Cypress operates at the speed of the browser’s ability to render content. So, all the tests will run in real-time.

Cypress is used by both developers and Test engineers. So, debugging can be done directly from the browser developer tools, which makes debugging lightning fast.

Cypress Automation runs from the command line or using the CI/CD tool and it records and takes a screenshot of every test. That makes Cypress tell the reason for failure and makes debugging easier.

Cypress automatically waits for async events (Page Loading), so no need to add sleepers in the test code. If we need sleepers, we can add timers as required. Cypress has its own API for developing custom commands and overwriting existing commands.

Cypress makes HTTP requests on behalf of the web application as it is executing and it was built of Mocha JS which includes a large set of APIs for utilizing browser-specific commands such as setting viewport, clearing cookies, basic browsing commands, etc.,

Cypress gives the advantages of using APP Actions an alternative to Page object Model, still we can use Page object Model as well. 

Challenges in Cypress Framework

 

Cypress only supports JavaScript Languages. Testers with JavaScript knowledge can create tests.

Cypress only supports Chrome, Firefox, Edge, Brave, and Electron browsers. Currently, tests cannot be run in Safari and IE browsers.

It doesn’t provide support for multi-tabs. Tests will run on a single window/tab. Cypress restricts to use of multiple browsers at the same time.

Cypress doesn’t support remote execution.

The Cypress test is valid for domains with the same origin. If logging in a user requires authentication from a third party. Since cypress has limitations, it can be used to subvert and test third-party login sites by interacting with the third-party authentication API programmatically.

Cypress Visual Testing

 

In Cypress Visual Testing layout of the application is tested to verify it looks and works as it was designed. Cypress does not have visual testing in the framework, so plugins and third-party tools are used. Several Open-Source plugins were available on the Cypress website for Visual UI tests such as Applitools, Percy, Happo, etc., Plugin will be selected based on Project needs. After UI Bugs are fixed Visual Regression test will be conducted to check the application looks as it should.

Cypress Cheat Sheet:

 

Installation commands
npm init -y	Create a project folder and then start with npm initializer
npm install cypress –save-dev	Installing cypress via npm
npx cypress open	Open cypress app from project root
Cypress events on element
cy.visit(url)	Go to the URL
cy.get(selector)	Get one or more DOM element
cy.get(ele).click()	Click on an element
cy.get(ele).dblclick()	Double click on an element
cy.get(ele).rightclick()	Right click on an element
cy.get(ele).type(“foobar”)	Type “foobar” into input element
cy.get(ele).clear()	Clear all text from input element
cy.get(ele).check(values)	Checked matched value of checkbox or radio
cy.get(ele).uncheck(values)	Unchecked matched value of checkbox or radio
cy.get(ele).focus()	Focus on an element
cy.get(ele).blur()	Blur the focused element
cy.get(ele).submit()	It requires the element to be a form. And it submits a form.
cy.get(ele).trigger(”click”)	Trigger any DOM event like mousemove, mouseup, mousedown, mouseover
cy.get(ele).select(value)	Select matched option from a dropdown menu
cy.writeFile(filePath, contents)	Write to a file with the specified contents
cy.wait(time)	Wait for a number of milliseconds
cy.wait(alias,time)	Wait for a number of milliseconds for an aliased resource to resolve
cy.url()	Yields current URL as string
cy.get(ele).then(($data) => {})	To work with the subject yielded from the previous command
cy.get(ele).shadow()	Traverse into the shadow DOM of an element
cy.get(ele).selectFile(filePath)	Selects a file or files in input element or simulates dragging a file or files into the browser
cy.get(ele).select(value)	Selects a matched value from “Select” element
cy.get(‘ele’).scrollIntoView()	Scrolls to the element to view
cy.request(method, url, body)	It makes an HTTP request
cy.reload()	Reloads the current page
cy.log(data)	Print a message to the Cypress Command Log
cy.get(ele).last()	It yields the last element
cy.intercept(method, url)	Spy and stub network requests and responses
cy.get(ele).first()	Get the first DOM element
cy.get(ele).find(‘foo’)	Find the descendent DOM elements of a specific selector
cy.get(ele).children(selector)	Find the child element of specific DOM element
Cypress Hooks
it.describe(“Test label”,()=>{ Test code })	It group and label the tests
before(function () { // … });	Runs once before the first test in this block
after(function () { // });	Runs once after the last test in this block
beforeEach(function () { // … });	Runs before each test in this block
afterEach(function () { //… });	Runs after each test in this block
Cypress run commands via CLI
npx cypress run	Runs all spec files
npx cypress run –spec ‘test file path’	Runs a specific spec file
npx cypress run –browser chrome	Run Cypress in the specified browser
npx cypress run –env “variable”	Specify environment variables
npx cypress run –group	Group recorded tests together under a single run
npx cypress run –headed	Displays the browser instead of running headless
npx cypress run –headless	Hide the browser instead of running headed (default during cypress run)
npx cypress run –key, -k	Specify your secret record key
npx cypress run –parallel	Run recorded specs in parallel across multiple machines
npx cypress run –record	Whether to record the test run
npx cypress run –reporter html	Specify a Mocha reporter as html or json
Cypress run from windows
npx cypress open	Cypress app will launch and click on the test file name which test we want to run
Cypress assertions
cy.get(ele).should(‘have.class’,value)	Check element has a specific class
cy.get(ele).should(‘have.css’,value)	Check element has a specific CSS style
cy.get(ele).should(‘be.visible’)	Check element is visible
cy.get(ele).should(‘not.be.visible’)	Check element is not visible
cy.get(ele).should(‘not.exist’)	Check element is not exists in the DOM
cy.get(ele).should(‘exist’)	Check element is exists in the DOM
cy.get(ele).should(‘have.length’,value)	Check the length is matching to elements count
cy.get(ele).should(‘have.value’,value)	Checks value of input field
cy.get(ele).should(‘be.checked’)	Checks for state of radio or checkbox
cy.get(ele).should(‘contains’,value)	Checks the value contains the string
expect(name).to.not.equal(‘Jane’)	Compare the strings
expect(ele).to.have.attr(attributeName,value)	Element should have the given attribute value
expect(ele).to.have.text(‘I love testing’)	Element should have the given text
expect(ele).to.be.hidden	Element should be hidden
expect(ele).not.to.be.empty	String or Array should not be empty
expect(ele).to.have.css(cssAttribute,value)	Element should have the mentioned css value
Error Handling for the element
1. The queryselector check the element length. 2. If there is an element in the DOM it returns true and we can do the actions on element. 3. If element is not exist on the DOM it prints the log content. It doesn’t fail the test and keep the test executing	it.only(‘Error handling’, () => { cy.visit(URL) cy.document().then(($document) => { const documentResult = $document.querySelectorAll(selector) if (documentResult.length) { //if the element length is greter than 0 it returns true // Do something } else { cy.log(“element not exist”); } }) })

Conclusion

 

Cypress is a cutting-edge framework for automation testing with expanding capabilities. It makes it simple and efficient for testers to set up, write, run, and debug tests. For end-to-end testing, Cypress is the best option.