Cypress PageObject如何实现可复用私有选择器并通过ESLint校验

问题场景 #

在Cypress中落地PageObject模式时，可将元素选择器统一收敛到单个文件内供类内方法复用，实现选择器单点维护。初始实现代码如下：

class HomePage {
  searchLink = "a[class='search button']";

  clickSearchLink() {
    cy.get(this.searchLink).click();
  }
}

export const homePage = new HomePage();

该实现可正常运行，测试用例可正常调用homePage.clickSearchLink()类方法，但存在两个待解决问题：

1. ESLint校验失败，报错信息如下：

e2e/page-objects/home-page.js 2:14 error Parsing error: Unexpected token =

2. 类中定义的searchLink选择器会暴露给外部spec测试文件，期望实现选择器仅在当前类内部可访问；曾尝试使用let/var声明选择器，但会导致类方法内无法访问对应变量。

解决步骤 #

两个问题可通过调整ESLint配置+使用JS原生类私有字段一次性解决：

1. 修复ESLint解析报错 #

报错本质是代码中使用的**类公共字段（Class Public Field）**是ES2022正式纳入标准的语法，旧版ESLint默认解析规则的ECMAScript版本设置过低，无法识别该语法。
修改项目下的ESLint配置文件（.eslintrc.js/.eslintrc.json等），提升解析支持的语法版本：

// .eslintrc.js 示例配置
module.exports = {
  // 保留原有其他配置
  parserOptions: {
    ecmaVersion: 2022, // 设置为2022或更高版本即可支持类字段语法
    sourceType: "module"
  }
}

配置完成后ESLint即可正常识别类字段的赋值语法，不会再触发解析错误。

2. 实现选择器类内私有访问 #

使用JavaScript原生的私有类字段语法即可实现属性的类内访问限制：私有字段以#作为前缀，仅能在声明它的类内部访问，外部实例无法读取/修改该属性，天然符合封装要求。
修改后的PageObject代码如下：

class HomePage {
  // 加#前缀声明私有字段，外部无法直接访问
  #searchLink = "a[class='search button']";

  clickSearchLink() {
    // 类内部通过this加#前缀访问私有字段
    cy.get(this.#searchLink).click();
  }
}

export const homePage = new HomePage();

该写法的优势：

• 外部spec文件访问homePage.#searchLink会直接报语法错误，完全杜绝选择器被外部随意调用的问题
• 类内部所有方法都可以正常访问#开头的私有选择器，不会出现作用域访问不到的问题
• 配合前面的ESLint ecmaVersion配置，不会触发任何校验报错
• 所有选择器依然统一维护在类的顶部，后续修改仅需调整一处即可，完全匹配最初的设计目标

内容的提问来源于stack exchange，提问作者Doctor Who