Cypress is the most used and trending automation tool. It is a JavaScript-based front-end testing tool that is built mainly for the modern web. Cypress allows end to end testing and works independently. Cypress has cheat codes that work as the guide that helps the tester write end to end tests. For 2023, the cheat sheet explains the commands which make the work easy. The present blog will highlight the Cypress cheat sheet for 2023.
Let’s first discuss what Cypress is all about.
Introduction to Cypress
Cypress is the new standard automation testing tool for front end testing. It is an open source, effortless and quick tool for testing any of the applications which runs on the browsers. It is targeted for Unit testing, Integration testing, and end to end flow testing.
It helps in creating test cases during the development of the application. It can be used best in the Test-Driven Development framework. It also has the Dashboard service that allows recording of the test execution.
What makes Cypress so popular?
The exciting features offered by Cypress made it the most used tool. Some of those are explained below:
It can take a snapshot of the test runs
It allows debugging directly from similar tools like Chrome DevTools.
It automatically reloads on making changes to the tests.
It automatically waits for the assertion and command.
Based on the features offered by Cypress, the use of Cypress has risen. For its quick use of commands and assertions, it has a cheat sheet that details the coding language and another shortcut.
What is a Cypress cheat sheet?
Cypress cheat sheet serves as the guide for helping the contributors, tester, and developers to write end to end tests easily and quickly with Cypress.
It can also be referred to as the reference sheet when reviewing a pull request.
Cypress cheat sheet can be simply understood as the compilation of all Cypress custom commands, which is based on the particular section of the web application.
The command and shortcuts provided in the Cypress cheat sheet showcase the best practices and conventions for writing better-automated test scripts.
Cypress Cheat Sheet explained.
Cheat code makes the work simpler with less typing. Below, we will demystify the rules followed and understood by Cypress to make the test more productive.
Querying element
Normally, you might use jQuery for querying for elements in the following way:
$(‘.my-selector’)
With Cypress, querying elements can be done by use “cy.get(‘.my-selector’)”
It leverages the selector engine of jQuery to assist in making the test familiar and readable for modern web developers.
Querying by Text Content
Manually, you can locate the thing by looking at the content on the page. However, with Cypress, you can use cy.contains() command as shown in the below image:
Image source: Cypress.io
This will help in writing the test from the view of the user interaction with the application.
cy.contains()- It gives DOM elements and allows further commands to be chained.
Missing of element
Cypress has the ability to detect the synchronous nature of the web application. The test does not fail immediately when an element is not found. Instead, it gives time to the window to finish the work. This is called “timeout”. The command will list “timeout” option in API documentation with a highlighting way to set the number of milliseconds you wish to continue to find the elements.
Image source: Cypress.io
Chains of commands
Cypress manages the Promise chain on behalf of the testers, where each command gives a “subject” to the subsequent command till it is completed or an error is identified. Some of the ways of its works are underlined in the below section.
Communication of elements
It is evident from the above section; Cypress helps in clicking on and typing on the elements on the page with the use of. click() and .type() action command with a cy.get() or cy.contains() query command.
Some of the other action commands Cypress has that help in interacting with the elements:
.blur() – It helps in making a focused DOM element blur.
.focus() – It focuses on a DOM element.
.clear() – Gives clear the value of an input or textarea.
.check() – It allows checking of the checkbox(es) or radio(s).
.uncheck() – It helps to uncheck checkbox(es).
.select() – It helps to select an <option> within a <select>.
.dblclick() – It can double-click a DOM element.
.rightclick() – It allows Right-click a DOM element.
The above-mentioned commands give you a guarantee on the state of elements that need to be before performing any actions. It can be explained from the example of writing. click() command helps in ensuring that elements are interacting with similar to real users.
The actions will give an automatic wait until the elements reach an actionable state. This further helps prevent flakiness. You can use the “Force” option to override such behavior.
Assertions
In Cypress, assertions help the tester to perform, like ensuring an element is visible or comes in a specific attribute, state, or CSS class. It helps in enabling the desired state of your application. It allows for the description of the desired state of the application. It will wait for the element to reach its state or fail the test on getting the assertion to pass.
It has two ways of writing assertion in Cypress:
Using .should() or .and() commands- With this, you can make an assertion in Cypress and apply it to the currently yielded subject in the command chain.
Using “expect” permits you to pass in a precise subject and make an assertion around it.
Some of the assertions in action commands are below:
cy.get(‘:checkbox’).should(‘be.disabled’)
cy.get(‘form’).should(‘have.class’, ‘form-horizontal’)
cy.get(‘input’).should(‘not.have.value’, ‘US’)
some default assertions are below:
.its() is supposed to ultimately search property on the current subject.
.find()- elements exist in the DOM
.type()- Elements be in a typeable state
Command specifying its value
In Cypress, the chain initiates with the “cy.[command]” and gives by the “command” forms what different other commands are called next (chained).
Some of the examples of the actions of the command give specific values.
cy.clearCookies()- this gives Null. The tester can chain off commands that give Null.
.click()- it gives the same subject as it was originally given. This requires DOM elements from the previous command.
.then()- If you wish to jump into the command flow, this command will help to call your callback function by giving the subject as the first argument. Later, if there is a need to continue with the chaining command after the .then(), then you have to specify the subject you wish to yield to those commands, which you can acquire with a return value different from ‘null’ or ‘undefined’. Then it will give the next command to you.
Timeout
Some of the default timeout duration-based commands which can be used for the specific function and help in performing the actions.
cy.visit()- this helps in loading the remote page and fails to resolve till all the external resources finish their loading phase.
cy.exec()- this allows running a system command like seeding a database.
Other common commands can be used in Cypress
Utility Commands
log- It log comments to command log
fixture- This gives fixture
.wait- Allows waiting for a specific amount of time.
.then( callback )- It works with the yielded subjects
.screenshot- It helps in taking a screenshot of the state of DOM
.debug- You can print debug information to the console
.pause- This halts testing at a specific point in time.
Browser commands
go(“back”)- This allows for clicking on the option of “back”
go(“forward”)- This allows clicking on the “forward” option in the browser
reload- It helps in refreshing or reloading of the page
viewport- You can change the size of window
url- It gives current URL
title- It gives the title to the document
.scrollIntoView- With this, you can scroll the element into view
.scrollTo- With this, you can scroll to a certain position in the window
Action commands
.type(“foobar”)- You allow typing “foobar” into an element
.focus- It helps in focusing on elements
.blur- It makes the element blur
.submit- You can submit a form with this action
.hover- This makes hover over an element
.trigger(”click”)- You can trigger any DOM elements
Selection Commands
Selectors/Locators include recognizing an HTML element to achieve activities by Cypress. CSS selector is known when you require to select an element on the ground of style sheet information.
Some of the common selection commands that you should remember in 2023 are:
contains- It helps in selecting a value in the opening and closing tags
.first- Allows selection of first matching element
.last – Allows you to select the last matching element
.next- Allows you to select the next matching element
.prev- Allows for previous matching element
.children- Allows selecting child of element
.parents: Allows to select the parent of the element
.siblings: Allows for selecting siblings of elements
.closest- Allows for selection of the closest element
.find- Allows for searching of child elements
.should & Common Chainers
“have.class”- This helps in checking for class
“have.css”- This helps in checking for the CSS style
“exist”- This helps in checking the existence of an element
“have.value”- This helps in checking the value of the input field
“be.checked”- This helps in checking the state of the radio and checkbox
“contains”- This helps in checking the value under the closing and opening tags
Conclusion
The present blog has presented some cheat codes for Cypress for 2023, which will make it easy for you to use. It will not only quicken your action but also make automation testing seamless. You can apply the cheat code mentioned with LambdaTest- a cloud-based cross-browser automation testing platform. It allows performing Cypress testing across 40+ different browser versions on the cloud. The most hassle work is to make it fully utilized. So, it is better suggested to have a clear note on the mentioned cheat code, which will help you apply the right code at the right time.