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

在使用 Cypress 进行前端自动化测试时，提取公共通用函数是一种优化测试代码结构和复用代码的有效方法。这样可以保持测试脚本的简洁性和可维护性。以下是一些步骤和示例，说明如何在 Cypress 中提取和使用公共通用函数：

步骤 1: 创建一个用于存放公共函数的文件

通常，我们可以在 Cypress 项目的 cypress 文件夹下创建一个名为 support 的子文件夹（如果尚未存在），然后在其中创建一个新的文件，例如 utils.js。这个文件将用来存放所有的公共函数。

步骤 2: 编写公共函数

在 utils.js 文件中，你可以定义一些可以在多个测试中复用的函数。例如，一个用于登录的函数：

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();
}

步骤 3: 在测试文件中导入和使用公共函数

一旦你的公共函数定义好后，你可以在任何测试文件中通过导入来使用这些函数。确保你的测试文件知道如何找到这些函数：

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');
  });
});

步骤 4: 维护和扩展

随着项目的发展，你可能需要添加更多的公共函数或修改现有的函数以满足新的测试需求。保持 utils.js 文件的组织和结构清晰是非常重要的，这样可以轻松地找到和修改函数。

例子：应用场景

假设我们在进行电商平台的测试。登录、添加商品到购物车、填写地址、选择支付方式等流程都可能在不同的测试场景中重复使用。我们可以将这些常用操作封装成函数，存放在 utils.js 中，然后在不同的测试脚本中导入使用，极大地提高了代码的复用率和测试的效率。

通过这种方式，Cypress 测试维护变得更简单，测试脚本也更加清晰和易于理解。公共函数的提取有助于减少代码冗余，使测试过程更加标准化。