Skip to main content

Cypress Commands Cheat Sheet

Absolutely! Here's a cheat sheet of essential Cypress testing tool commands, organized into categories for easy reference:

Navigation and URL Manipulation

  • cy.visit(url): Navigate to a specific URL.
  • cy.go('back'|'forward'): Go back or forward in browser history.
  • cy.reload(): Reload the current page.
  • cy.url(): Retrieve the current URL.

Locating Elements

  • cy.get(selector): Find elements based on CSS selectors, data attributes, etc.
  • cy.contains(selector, text): Find elements containing specific text.
  • cy.within(selector, callback): Scope commands within a specific element.

Interacting with Elements

  • cy.click(): Click on an element.
  • cy.type(text): Type text into an input field or textarea.
  • cy.clear(): Clear the value of an input field or textarea.
  • cy.check(): Check a checkbox or radio button.
  • cy.uncheck(): Uncheck a checkbox.
  • cy.select(value): Select an option in a dropdown.

Assertions

  • cy.should(assertion): Make various assertions about elements (e.g., 'have.value', 'be.visible', 'have.class')
  • cy.should('not.exist'): Assert an element doesn't exist.

Network Requests

  • cy.intercept(url, routeHandler): Intercept network requests and define custom responses.
  • cy.wait('@alias'): Wait for an aliased network request to complete.

Custom Commands

  • Cypress.Commands.add(name, callback): Create reusable custom commands to streamline complex actions.

Debugging

  • cy.pause(): Pause test execution for debugging.
  • cy.debug(): Attach a debugger to the test runner.

Best Practices Absolutely! Let's streamline and refine these best practices to create a super-sharp and focused guide.

Consolidated and Enhanced Best Practices

  1. Descriptive Test and Function Names: Use names that clearly communicate the intent of your tests and custom functions. This makes your code self-documenting and eases collaboration.

  2. Page Object Model (POM): Organize your code and improve maintainability by encapsulating interactions with specific web pages or components within page object classes.

  3. Cypress's Command Chaining: Write concise and readable tests by leveraging the ability to chain Cypress commands.

  4. Robust Assertions and Waiting: Ensure accurate tests by incorporating the following:

    • Assertions Before Actions: Verify an element's state before interacting with it.
    • Intelligent Waiting Strategies: Rely on Cypress's built-in waiting and retry functionality instead of hardcoded timeouts to accommodate asynchronous behavior.

  5. Strategic Element Selection:

    • Data-testid Attributes: Add data-testid attributes to elements for reliable and maintainable selectors.
    • Prioritize CSS Selectors: Use CSS selectors whenever possible, resorting to XPath only when absolutely necessary.

  6. Debugging Prowess: Master Cypress's debugging features:

    • Time-Travel Debugging: Step through your test execution for efficient issue identification.
    • Informative Error Messages: Analyze clear error messages to pinpoint problems.

  7. Alias Usage: Enhance test readability and maintainability by using cy.as() to create reusable references to elements.

  8. Test Structure and Organization:

    • Clear Naming: Adopt descriptive names for folders and test files.
    • Logical Breakdown: Consider structuring your tests to mirror your application's components or pages for easier navigation.

  9. Addressing Flakiness: Mitigate non-deterministic test failures by carefully crafting tests and potentially incorporating retry mechanisms.

  10. Visual Regression Testing: (Optional) Integrate dedicated tools like Applitools to catch unintended changes to your application's appearance.

  11. Performance Considerations: (Optional) Keep performance in mind as you build your test suite, especially if you have a large number of tests.