Writing Reusable Custom Commands in Cypress

 Cypress is a powerful JavaScript-based end-to-end testing framework widely used for testing modern web applications. One of its standout features is the ability to write custom commands—reusable wrappers around common or complex logic—which can help reduce duplication, improve readability, and enforce consistency across your test suite.

In this blog, we’ll explore how to write reusable custom commands in Cypress, why they matter, and how to structure them for maintainable, scalable testing.


What Are Custom Commands in Cypress?

Custom commands are user-defined functions that extend Cypress’s built-in cy object. They allow you to encapsulate frequently-used sequences of actions or assertions.

For example, if you find yourself logging into your application at the beginning of multiple test cases, you can write a custom command like cy.login() and reuse it wherever needed.


Benefits of Custom Commands

DRY (Don’t Repeat Yourself): Avoid duplicating test code across multiple spec files.

Improved Readability: Replace long code blocks with descriptive commands.

Centralized Maintenance: Update the logic in one place to affect all tests.

Better Abstraction: Focus on test intent rather than implementation details.


Creating Your First Custom Command

To create a custom command, you use the Cypress.Commands.add() method, typically in the cypress/support/commands.js file.


Example: A Login Command

javascript

Copy

Edit

// cypress/support/commands.js


Cypress.Commands.add('login', (email, password) => {

  cy.visit('/login');

  cy.get('input[name=email]').type(email);

  cy.get('input[name=password]').type(password);

  cy.get('button[type=submit]').click();

});

Usage in a Test

javascript

Copy

Edit

// cypress/e2e/login.spec.js


describe('User Login', () => {

  it('should log in successfully', () => {

    cy.login('user@example.com', 'securePassword123');

    cy.url().should('include', '/dashboard');

  });

});

Now, instead of repeating the login steps in every test, you simply call cy.login().


Passing Options and Handling Edge Cases

You can enhance your commands by passing optional parameters or adding conditional logic:


javascript

Copy

Edit

Cypress.Commands.add('login', ({ email = 'admin@test.com', password = 'admin123' } = {}) => {

  cy.visit('/login');

  cy.get('#email').type(email);

  cy.get('#password').type(password);

  cy.get('form').submit();

});

Then use it like:


javascript

Copy

Edit

cy.login(); // Uses default values

cy.login({ email: 'user@test.com', password: 'userpass' });

Creating Commands for API Requests

Custom commands aren’t limited to UI interactions. You can use them for API calls, test data creation, or cleanup tasks:


javascript

Copy

Edit

Cypress.Commands.add('createUser', (user) => {

  cy.request('POST', '/api/users', user);

});

This allows you to programmatically create test users before running UI tests.


Best Practices

Name commands descriptively: Use names like cy.loginAsAdmin(), cy.fillContactForm(), etc.

Avoid logic-heavy commands: Keep commands focused on single responsibilities.

Use TypeScript (optional): For type safety and IntelliSense support.

Test your commands: Validate that custom commands work independently.

Document them: Maintain documentation to help team members understand usage.


Conclusion

Writing reusable custom commands in Cypress helps streamline your test automation efforts, promotes clean and maintainable code, and enhances test readability. Whether you’re logging in, filling forms, or setting up API data, encapsulating that logic into commands reduces duplication and empowers your team to write faster, more efficient tests. As your test suite grows, well-structured custom commands become essential for maintaining quality and speed in your testing workflow.


Learn Cypress Training

Read More: Cypress vs Playwright: Which is Better?
Read More: Difference Between Cypress and Selenium
Read More: Interacting with DOM Elements in Cypress

Visit IHUB Talent Training Institute in Hyderabad
Get Direction

Comments

Post a Comment

Popular posts from this blog

How to Use Tosca's Test Configuration Parameters

Tosca by Tricentis is a powerful model-based test automation tool widely used in enterprise environments for end-to-end testing. One of its most useful features is Test Configuration Parameters (TCPs), which provide flexibility and control in managing test execution. TCPs enable testers to create reusable test cases by passing dynamic values without hardcoding them. This significantly enhances test maintenance, scalability, and efficiency. In this blog, we’ll explore what Test Configuration Parameters are, how to create and use them, and the best practices to follow when working with TCPs in Tosca. What Are Test Configuration Parameters? Test Configuration Parameters are custom-defined key-value pairs that can be associated with test cases, test case folders, or execution lists in Tosca. They help manage configuration data such as environment URLs, browser types, credentials, or any other variable data that may differ across test runs. By using TCPs, you can avoid duplicating test case...
Read more

Using Hibernate ORM for Fullstack Java Data Management

In the world of fullstack Java development, managing data efficiently and seamlessly across the application is critical. One of the most powerful tools in the Java ecosystem for handling database operations is Hibernate ORM (Object-Relational Mapping). Hibernate simplifies the interaction between Java applications and relational databases, reducing boilerplate code and improving maintainability. This blog explores how Hibernate ORM works, why it’s widely used, and how it fits into the data management strategy of a fullstack Java application. What is Hibernate ORM? Hibernate ORM is an open-source Java framework that provides a powerful and flexible mechanism for mapping Java objects to database tables. It abstracts the low-level JDBC code, allowing developers to work with high-level object-oriented concepts. Instead of writing raw SQL queries, Hibernate allows developers to define database interactions using simple Java classes (also known as POJOs) and annotations or XML configurations...
Read more

Creating a Test Execution Report with Charts in Playwright

Modern test automation isn't just about running tests—it's also about presenting clear, visual feedback on test results. When working with Playwright, one of the most powerful end-to-end testing tools for modern web apps, generating detailed execution reports can help your team track progress, identify issues quickly, and make data-driven decisions. A visual report with charts brings your testing efforts to life. In this blog, we’ll walk through how to create a test execution report with charts using Playwright’s built-in capabilities along with third-party tools for enhanced visualization. Why Visual Reports Matter Plain text logs and console outputs are hard to parse at scale. A good report should answer questions like: How many tests passed or failed? What’s the overall success rate? Which tests are flaky or slow? How have test results changed over time? Visualizing this data with charts—like pie charts, bar graphs, or timelines—helps QA teams and stakeholders better underst...
Read more