如何使用 Cypress pageObject 类拥有可重用的选择器？

Question

我正在尝试在 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 解析错误：Unexpected token =

2. 这样做意味着 searchLink 在我的规范文件中可用，我希望它只在此类中可见。 我尝试将 searchLink 设置为 let 或 var ，但这只是使其在 clickSearchLink() 函数中无法使用。

是否有可能让我的选择器在这个类中并且仍然通过 linting？

Answer 1

如果你将 Typescript 目标提升到 es6/es2015，你可以使用私有字段。

私人课程特色

私课特色

默认情况下，类字段是公共的，但可以使用哈希 # 前缀创建私有类成员。 这些类特性的隐私封装由 JavaScript 本身强制执行。

对于 ESLint 错误，添加构造函数。

class HomePage {
  #searchLink: string;
  
  constructor() {
    this.#searchLink = "a[class='search button']";
  }

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

export const homePage = new HomePage();

/cypress/tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "target": "es6",
    ...
  },
  "include": ["**/*.ts"]
}