Cypress JS 如何实现多页面对象方法链式调用

拆分UserRow类的思路完全可行，核心要解决两个问题：自定义类实例的链式上下文返回、行级元素的作用域定位，具体实现如下：

修正UserRow类实现 #

之前的写法问题在于每次调用元素方法都全局重新查找DOM，既容易出现多元素匹配错误，也没有保留链式调用所需的实例引用，直接调整为：

class UserRow {
  private row: Cypress.Chainable<JQuery<HTMLElement>>;
  userId: string;

  constructor(userId: string) {
    this.userId = userId;
    // 初始化时绑定当前用户行作为所有行内元素的查找根节点
    this.row = cy.get(".MuiTableBody-root>tr").find(`.user_${userId}`);
  }

  // 兼容Cypress原生should断言，返回实例支持后续链式
  should(assertion: string, ...args: any[]) {
    this.row.should(assertion, ...args);
    return this;
  }

  // 行内菜单按钮，基于当前行查找，不会串到其他用户行
  get menuButton() {
    this.row.find(">td>button").click();
    return this;
  }

  // 模拟登录操作
  get impersonate() {
    return {
      click: () => {
        cy.get("[style='position: fixed; z-index: 1300; inset: 0px;'] > .MuiPaper-root > .MuiList-root")
          .contains("Impersonate")
          .click();
        return this;
      }
    }
  }

  // 删除操作
  get delete() {
    return {
      click: () => {
        cy.get("[style='position: fixed; z-index: 1300; inset: 0px;'] > .MuiPaper-root > .MuiList-root")
          .contains("Delete")
          .click();
        return this;
      }
    }
  }
}

调整UsersTable的userRow返回逻辑 #

保留原有兼容逻辑，传userId时返回UserRow实例，不传时返回原生Cypress行元素对象兼容全表操作：

class UsersTable {
  // 原有封装的方法、getter全部保留
  get rolesAndStatusMenu() {
    return cy.get("#menu- > .MuiPaper-root > .MuiMenu-list>li");
  }

  get usersPartialRow() {
    return cy.get(".MuiTableBody-root>tr>td");
  }

  settings(options: string) {
    return cy
      .get("[style='position: fixed; z-index: 1300; inset: 0px;'] > .MuiPaper-root > .MuiList-root")
      .contains(options);
  }

  menuButton(userId: string) {
    return cy.get(`.user_${userId}>td>button`);
  }

  userRow(userId?: string) {
    const rowSelector = ".MuiTableBody-root>tr";
    if (!userId) {
      return cy.get(rowSelector);
    }
    return new UserRow(userId);
  }
}

上层页面对象无需调整，直接支持链式写法 #

原有Users页面对象保持不变，测试用例可直接按预期写法调用：

// 访问用户列表→定位目标用户→打开菜单→点击模拟登录
usersPage.visit().usersTable.userRow(userId).menuButton.impersonate.click();

// 定位目标用户→打开菜单→点击删除→校验用户已被删除
usersPage.usersTable.userRow(userId).menuButton.delete.click().should("not.exist");

实现要点 #

• 所有需要接续链式调用的自定义类方法、getter，必须返回当前类实例this，和Cypress原生链式调用逻辑对齐
• 行内子元素必须基于初始化时保存的当前行元素调用find查找，禁止全局cy.get，避免多数据场景下定位到其他行的同名元素
• 动态传入的userId不需要硬编码，每次调用userRow(动态id)时都会生成绑定对应行的独立实例，参数动态变化不影响定位准确性
• 后续新增行级操作（比如编辑、重置密码）直接在UserRow类中新增对应方法，返回this即可自动支持链式调用

内容的提问来源于stack exchange，提问作者Ali Unsal Albaz