I'm trying to use a pageObject in Cypress, I want to have my selectors in the same file so I can reuse them in multiple functions and only need to change them in one place if they need updating.
Here is a simple example:
class HomePage {
searchLink = "a[class='search button']";
clickSearchLink() {
cy.get(this.searchLink).click();
}
}
export const homePage = new HomePage();
This works fine, my test can call the functions e.g. homePage.clickSearchLink() but I have two issues:
e2e/page-objects/home-page.js 2:14 error Parsing error: Unexpected token =
Is it possible to have my selectors in this class and still pass linting?
If you bump the Typescript target to es6/es2015 you can use private fields.
Private class features
Class fields are public by default, but private class members can be created by using a hash # prefix. The privacy encapsulation of these class features is enforced by JavaScript itself.
For the ESLint error, add a constructor.
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"]
}