Cypress 中 Page Object 模式有必要用吗？

Page Object 模式将页面元素选择器和操作封装为独立类，测试代码只调用方法不直接写选择器，页面变更时只需改 Page Object 不改测试。但在 Cypress 中，Custom Command 常能替代 POM 的大部分功能——cy.login() 比 loginPage.login() 更符合 Cypress 风格。POM 真正有价值的场景是：多页面复杂流程（如电商下单流程跨 4 个页面）、团队已熟悉 POM 模式、选择器需要跨多个测试文件共享复用。

追问

Cypress 官方对 POM 的态度是什么？ 官方认为 POM 不是必须的，Cypress 的 Custom Command 和组合式 API 已能很好复用逻辑；过度封装反而增加维护成本，简单场景用 Custom Command 更合适。

Custom Command 和 POM 怎么选？ 单页面或少交互场景用 Custom Command（如 cy.login()）；多页面流程且团队习惯 OOP 风格时用 POM，两者可混合使用。

POM 中选择器应该怎么管理？ 统一使用 data-testid 属性作为选择器锚点，不依赖 CSS class 或 DOM 结构，UI 样式变更不影响测试稳定性。

POM 类变得臃肿怎么办？ 拆分为基础 PageObject（通用方法）+ 具体页面子类；组件级别的对象（如导航栏）独立为 Component Object，避免单类膨胀。

写段代码

javascript
// POM 类 + 测试使用
class LoginPage {
  get username() { return cy.get('[data-testid=username]'); }
  get password() { return cy.get('[data-testid=password]'); }
  login(user, pass) {
    this.username.type(user);
    this.password.type(pass);
    cy.get('[data-testid=submit]').click();
  }
}
// 测试中
const login = new LoginPage();
login.login('admin', '123456');
cy.url().should('include', '/dashboard');