Cypress Cheat Sheet: Commands, Assertions and More

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.

TL;DR

• Comprehensive Cypress Guide: The cheat sheet offers essential commands, techniques, and best practices for mastering Cypress, whether you're preparing for an interview or enhancing your testing skills.
• Key Features Overview: Highlights Cypress's powerful capabilities, such as real-time reloading, time travel, automatic waiting, cross-browser testing, and integration with CI/CD tools.
• Locator Commands Explained: Provides detailed explanations of Cypress locators like cy.get(), cy.contains(), and others, ensuring robust and flexible element interaction in tests.
• Utility and Action Commands: Covers a range of Cypress commands for selection, action, assertion, debugging, and network request management, serving as a quick reference for efficient test writing.

Check also:

• Cypress Recorder vs BugBug
• Cypress Hover Element vs BugBug
• Why Should You Use data-testid Attributes?

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.

Cypress Basics

Language and Syntax of Cypress.io

• Written in JavaScript.
• Tests are written using Mocha and Chai syntax, which many JavaScript developers are familiar with.

Environment

• 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.

Real-time Reloading

• Cypress automatically reloads tests when changes are made, making for a smoother developer experience.

Time Travel

• 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.

Debuggability

• 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.

Automatic Waiting

• 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.

Cross-browser Testing

• While originally designed for Chrome, Cypress now supports multiple browsers including Edge, Firefox, and Electron.

Dashboard

• 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 <p> 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

Below is an overview of some of the most essential Cypress methods that are frequently used to create automated tests.

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.

Utility Commands

• 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.

Selection Commands

• 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.

Action Commands

• 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 <select> element.
• cy.submit(): Submit a form.

Browser Commands

• cy.visit(url): Visit a URL.
• cy.location(): Get the current URL, pathname, or hash.
• cy.title(): Get the title of the current page.
• cy.url(): Get the current URL as a string.
• cy.go('back') / cy.go('forward'): Navigate back or forward in the browser's history.

Assertion Commands

• cy.should('be.checked'): Asserts that the element is checked.
• cy.should('have.class', 'className'): Asserts that the element has a specific class.

Network Requests

• cy.request(): Make an HTTP request.
• cy.server(): Start a server to manage HTTP requests.
• cy.route(): Control behavior of network requests.

Aliases

• cy.as('aliasName'): Assign an alias for later use.
• cy.get('@aliasName'): Retrieve an aliased element.

File Upload and Download

• cy.readFile(): Read a file's contents.
• cy.writeFile(): Write data to a file.

Environment and Configuration

• Cypress.env('VAR'): Access environment variables.
• Cypress.config('key'): Get or set configuration.

Debugging

• cy.debug(): Debug the command's subject in the developer tools.
• cy.pause(): Pause test execution.

This cheat sheet provides a quick reference to some of the basic commands and utilities in Cypress. For comprehensive details and updates, refer to the official Cypress documentation.

Conclusion

These are just the tip of the iceberg when it comes to Cypress's capabilities. These commands are foundational and are frequently used in most Cypress test suites. As always, the Cypress documentation provides a comprehensive look at all the commands and their various options. Stay up to date and check our Xpath Cheat Sheet and Cheatography.com for more automation tips.

Happy (automated) Testing!

FAQ

What is Cypress Cheat Sheet about?

A: Cypress Cheat Sheet is a guide that provides Cypress commands, assertions, and other useful information for using Cypress, an end-to-end testing framework, efficiently.

How can I use Cypress Cheat Sheet?

A: You can use Cypress Cheat Sheet as a quick reference while working with Cypress. It provides handy commands, syntax examples, and tips to make your testing process smoother.

What are Cypress methods?

A: Cypress is an end-to-end testing framework that allows you to write and perform tests in JavaScript. It provides a rich set of commands and assertions to accurately test web applications.

Can I use Cypress with JavaScript in plain English?

A: Yes, Cypress supports writing test cases using JavaScript in plain English. You can use natural language commands to describe your test scenarios, making them more readable and understandable.

How do I select an element with Cypress?

A: To select an element with Cypress, you can use various commands such as cy.get(), cy.contains(), or cy.find(). These commands allow you to access DOM elements based on CSS selectors, text content, or other attributes.

Is Cypress free to use?

A: Yes, Cypress is an open-source tool and is available for free to use.

What is Berastis?

A: Berastis is a company that provides consulting and migration services for Cypress. They help clients in migrating from Cypress to other testing frameworks such as Playwright.

Can you tell me more about migrating from Cypress to Playwright?

A: Migrating from Cypress to Playwright is a process of transitioning your existing Cypress tests to use the Playwright framework instead. This allows you to leverage the benefits and features offered by Playwright.

What is the latest version of Cypress Cheat Sheet?

A: The latest version of Cypress Cheat Sheet is the most up-to-date version that includes the latest commands, assertions, and best practices for using Cypress.

Can I write advanced test scenarios with Cypress Cheat Sheet?

A: Yes, Cypress Cheat Sheet covers advanced concepts and techniques in Cypress testing. You can learn and implement advanced test scenarios using the provided commands and examples.