如何使用Cypress PageObject类的可重复使用的选择器？

Question

我正在尝试在柏树中使用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错误解析错误：意外 令牌=

2. 这样做意味着我的规格文件中可用搜索链接，我希望它仅在此类中看到。我尝试将SearchLink设置为LET或VAR，但这只是在ClickSearchLink（）函数中无法使用。

是否可以在此课程中让我的选择器并通过覆盖？

Answer 1

如果将打字稿目标撞到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"]
}