How to abstract common function out from the test file in Cypress

When using Cypress for frontend automated testing, extracting common utility functions is an effective way to optimize the structure of test code and reuse code. This helps keep test scripts concise and maintainable. The following steps and examples illustrate how to extract and use common utility functions in Cypress:

Step 1: Create a file to store common utility functions

Typically, you can create a subfolder named support (if it doesn't already exist) within the cypress folder of your Cypress project, and then create a new file, such as utils.js, inside it. This file will store all common utility functions.

Step 2: Write common utility functions

In the utils.js file, you can define functions that can be reused across multiple tests. For example, a login function:

javascript
// cypress/support/utils.js

export const login = (username, password) => {
  cy.get('input[name="username"]').type(username);
  cy.get('input[name="password"]').type(password);
  cy.get('form').submit();
}

Step 3: Import and use common utility functions in test files

Once your common utility functions are defined, you can use them in any test file by importing them. Ensure your test files know how to locate these functions:

javascript
// cypress/integration/loginTest.js

import { login } from '../support/utils';

describe('Login Test', () => {
  it('should login successfully', () => {
    cy.visit('/login');
    login('username', 'password');
    cy.url().should('include', '/dashboard');
  });
});

Step 4: Maintain and extend

As your project grows, you may need to add more common utility functions or modify existing ones to meet new testing requirements. Keeping the utils.js file organized and structured clearly is crucial for easily finding and modifying functions.

Example: Application scenarios

Suppose we are testing an e-commerce platform. Actions like logging in, adding items to the shopping cart, filling out addresses, and selecting payment methods may be reused across different test scenarios. We can encapsulate these common operations into functions stored in utils.js and import them into different test scripts, significantly improving code reusability and testing efficiency.

By doing this, maintaining Cypress tests becomes simpler, and test scripts become clearer and more understandable. Extracting common utility functions helps reduce code redundancy and standardize the testing process.