Cypress 如何进行 UI 自动化元素抽离？

前言

在进行 UI 自动化测试时，元素抽离是一个非常重要的步骤。它可以帮助我们更好地维护测试代码，提高测试效率。在 Cypress 中，我们可以通过多种方式来进行元素抽离。本文将介绍其中两种常用的方式。

方式一：使用 fixtures 文件

我们可以将页面上的元素信息存储在一个 JSON 文件中，然后在测试代码中引用这个文件。这样做的好处是，我们可以将元素信息与测试代码分离，使测试代码更加简洁和易于维护。

步骤一：创建 fixtures 文件

在 Cypress 的 fixtures 目录下创建一个 JSON 文件，例如 elements.json，并在其中存储页面上的元素信息，例如：

{
  "loginButton": "button[id='login']",
  "usernameInput": "input[name='username']",
  "passwordInput": "input[name='password']"
}

步骤二：在测试代码中引用 fixtures 文件

在测试代码中使用 cy.fixture() 方法引用 fixtures 文件，并将元素信息保存在变量中，例如：

// javascriptcn.com 代码示例
describe('Login', () => {
  it('should log in successfully', () => {
    cy.fixture('elements.json').then((elements) => {
      cy.visit('/login');
      cy.get(elements.usernameInput).type('username');
      cy.get(elements.passwordInput).type('password');
      cy.get(elements.loginButton).click();
      cy.url().should('include', '/dashboard');
    });
  });
});

方式二：使用 Page Object 模式

Page Object 模式是一种常用的元素抽离方式，它将页面抽象为一个对象，每个页面都对应一个 Page Object 类。在 Page Object 类中定义页面上的元素和方法，并将它们封装起来。这样做的好处是，我们可以更好地组织测试代码，使测试代码更加清晰和易于维护。

步骤一：创建 Page Object 类

在 Cypress 的 support 目录下创建一个 Page Object 类，例如 LoginPage.js，并在其中定义页面上的元素和方法，例如：

// javascriptcn.com 代码示例
class LoginPage {
  visit() {
    cy.visit('/login');
  }
  
  get usernameInput() {
    return cy.get('input[name="username"]');
  }
  
  get passwordInput() {
    return cy.get('input[name="password"]');
  }
  
  get loginButton() {
    return cy.get('button[id="login"]');
  }
  
  login(username, password) {
    this.usernameInput.type(username);
    this.passwordInput.type(password);
    this.loginButton.click();
  }
}

export default new LoginPage();

步骤二：在测试代码中引用 Page Object 类

在测试代码中使用 import 语句引用 Page Object 类，并使用 Page Object 类中定义的方法和元素，例如：

// javascriptcn.com 代码示例
import LoginPage from '../support/LoginPage';

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

总结

在 Cypress 中进行 UI 自动化测试时，元素抽离是一个非常重要的步骤。我们可以使用 fixtures 文件或 Page Object 模式来进行元素抽离。使用这些方法可以使测试代码更加清晰和易于维护。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653bdecf7d4982a6eb622739