如何使用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错误解析错误:意外令牌=

1. 这样做意味着searchLink在我的规范文件中是可用的，我希望只在这个类中看到它。我尝试将searchLink设置为let或var，但这使得它在clickSearchLink()函数中不可用。

能不能让我的选择器在这门课上还能通过？

Answer 1

如果将类型转换为es6/es6 2015，则可以使用私有字段。

私有阶级特征

私有类特性 类字段在默认情况下是公共的，但是可以使用散列#前缀创建私有类成员。这些类特性的保密封装是由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"]
}