Recently, I started using playwright and decided to implement the page object model using typescript. Everything was going smoothly until I ran a lint check. Unfortunately, the linting check failed in the Pull Request Check on GitHub.
The error is occurring specifically on my login page during the linting check.
import { Page } from "@playwright/test";
export class LoginPage {
readonly page: Page;
readonly userName: any;
readonly password: any;
readonly loginButton: any;
constructor(page: Page) {
this.page = page;
this.userName = this.page.locator('[data-qa="login-input-email"]');
this.password = this.page.locator('[data-qa="login-input-password"]');
this.loginButton = this.page.locator('[data-qa="login-button"]');
}
/**
* @param {string} text
*/
async enterUsername(text) {
await this.userName.fill(text);
}
/**
* @param {string} text
*/
async enterPassword(text) {
await this.password.fill(text);
}
async clickLoginBtn() {
await this.loginButton.click();
}
}
When I tried running the lint command below in the terminal
npx eslint "./src/**" --cache
This is the error message it returned.
C:\Users\path\Desktop\path\Workspace\path\path\src\portal\locators\common\CommonPage.ts 5:13 error Parsing error: Unexpected token (5:13)
The issue seems to be related to the following declarations.
readonly page: Page;
readonly userName: any;
readonly password: any;
readonly loginButton: any;
Here is the content of .eslintrc.js
module.exports = {
"env": {
"es2021": true,
"node": true
},
"extends": "eslint:recommended",
"overrides": [
{
"env": {
"node": true
},
"files": [
".eslintrc.{js,cjs}"
],
"parserOptions": {
"sourceType": "script",
}
}
],
"parser": "@babel/eslint-parser",
"parserOptions": {
"requireConfigFile": false,
"ecmaVersion": 2020,
"sourceType": "module",
"babelOptions": {
"babelrc": false,
"configFile": false
},
},
"rules": {
}
}
Does anyone have any insights on how to resolve this issue? Thank you!