Table of Contents
- Cypress Basics
- What are Cypress Locators?
- Cypress Cheat Sheet
Whether you're a software developer or someone still delving into the depths of programming, having a quick and reliable cheat sheet can transform your testing experience. Cypress Cheat Sheet is your free ticket to mastering the essential commands and elements of Cypress with ease.
With the latest updates in online resources, many platforms may offer insights into Cypress, but this cheat sheet aims to provide the most useful and succinct information you need. From simple commands to select elements to master intricate data manipulations for user-centric application development, this sheet has it all.
If you're gearing up for an interview, want to create robust cypress tests, or just wish to learn more, please keep this guide handy. With a fusion of the 1, 2, 3 (and yes, even 5) best practices, techniques, and tricks, our cheat sheet is your go-to guide to ensure you're always a step ahead in your Cypress journey. So, without further ado, let's dive into the world of Cypress and unravel the magic it can bring to your testing repertoire.
Check out our Cypress Best Practices Guide.
Language and Syntax of Cypress.io
- It runs directly in the browser, ensuring tests are executed in the same run loop as the application.
- Unlike Selenium, which runs outside of the browser and communicates over a server, Cypress commands run natively within the browser.
Check our Best Selenium Practice Websites article.
- Cypress automatically reloads tests when changes are made, making for a smoother developer experience.
- Cypress takes snapshots as your tests run. With the Test Runner, you can hover over commands in the Command Log to see exactly what happened at each step.
- Built-in debugging capabilities.
- Developers can use the
.debug()method or utilize browser dev tools.
Network Traffic Control
- Can stub and intercept network requests.
- Enables testing scenarios without relying on an actual server or backend.
- Cypress automatically waits for elements to exist, commands to execute, and network responses to complete before moving on. This means tests are less flaky and brittle.
- While originally designed for Chrome, Cypress now supports multiple browsers including Edge, Firefox, and Electron.
- Cypress offers a Dashboard Service that provides insights into test runs. It includes features like video recording, test result history, and collaboration tools for teams.
Parallelization and Load Balancing
- Using the Dashboard, Cypress can run tests in parallel, across multiple machines, speeding up test execution.
Integration with CI/CD
- Cypress easily integrates with Continuous Integration (CI) tools like Jenkins, Travis CI, CircleCI, and others.
Community and Plugins
- It has a strong community with numerous plugins available, extending its core capabilities.
What are Cypress Locators?
In Cypress, the term "locators" typically refers to the methods or strategies used to identify and select elements within a web page to interact with or validate during tests. The primary locator method in Cypress relies on CSS selectors, but Cypress also provides additional, specialized commands that function as locators.
A wide range of locators are supported, encompassing tags, IDs, classes, attributes, and even text content. While Cypress does offer support for XPath selectors, it requires an additional step: installing the third-party cypress-xpath plugin. Unlike other selectors, XPath isn't natively supported in Cypress.
Here are the main Cypress locators
cy.get(): This is the primary method to select elements in Cypress and it uses CSS selectors.
-cy.get('.class-name'); // Selects elements with the class "class-name"
-cy.get('#element-id'); // Selects the element with the ID "element-id"
cy.contains(): This command searches for an element containing specific text. It's helpful when you want to locate elements based on their content rather than attributes.
-cy.contains('Submit'); // Finds the first element containing the text "Submit"
-cy.contains('p', 'Hello'); // Finds the first
tag containing the text "Hello"
cy.root(): Returns the current root element. By default, this command yields the element, but the subject changes as more commands are chained onto it.
cy.document(): This yields the entire document object, allowing you to interact directly with the whole document or use it as a starting point for other commands.
cy.viewport(): While not a direct locator, this command allows you to set the size of the viewport, indirectly affecting which elements might be visible or accessible for interactions.
cy.window(): Returns the window object of the page under test. This can be useful when you need to interact or check properties on the window object itself.
It's a common best practice in Cypress (and other testing tools) to use dedicated data attributes, like data-cy, data-test, or data-testid, in the HTML markup to identify elements explicitly meant for testing. This approach decouples your tests from CSS or JS changes, making them less brittle. While CSS selectors are the backbone of element locating in Cypress, these specialized commands and approaches make the process more flexible, effective and robust. By understanding and combining these locators appropriately, testers can ensure they're interacting with the correct elements in a resilient manner.
Cypress Cheat Sheet
Context and Hooks
describe() / context(): Define a test suite.
it() / specify(): Define a test case.
before(): Run once before all tests in a block.
after(): Run once after all tests in a block.
beforeEach(): Run before each test in a block.
afterEach(): Run after each test in a block.
.should & Common Chainers
.should('not.exist'): Assertion to check if element does not exist.
.should('be.visible'): Assertion to check if element is visible.
.should('contain', 'text'): Assertion to check if element contains text.
.should('have.value', 'value'): Assertion to check if form element has a value.
Chainers like .and, .not, .eq, .first, .last, .have.length can be used for more complex assertions.
cy.log(): Log a message to the Cypress Command Log.
cy.clearCookies(): Clear browser cookies.
cy.fixture(): Load a fixed set of data located in a file.
cy.reload(): Reload the current page.
cy.screenshot(): Take a screenshot of the current state of the application.
cy.get(selector): Select DOM elements.
cy.contains(content): Select elements containing specific text or content.
cy.root(): Get the root DOM element.
cy.within(): Scope upcoming commands to within a DOM element.
cy.click(): Click a DOM element.
cy.type('text'): Type text into a DOM element.
cy.check(): Check a checkbox or radio button.
cy.uncheck(): Uncheck a checkbox.
cy.select('option'): Select an option in a