如何使用 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"]
}