Playwright TypeScript POM代码ESLint检测报Unexpected token解析错误

我是Playwright新手，正在使用TypeScript编写页面对象模型（POM）代码，脚本运行正常，但执行ESLint检测时出现错误，导致GitHub的Pull Request检查无法通过。

触发错误的LoginPage代码 #

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();
    }
}

ESLint错误信息 #

执行命令 npx eslint "./src/**" --cache 后得到：

C:\Users\path\Desktop\path\Workspace\path\path\src\portal\locators\common\CommonPage.ts
5:13 error Parsing error: Unexpected token (5:13)

错误指向类中的readonly属性声明：

readonly page: Page;
readonly userName: any;
readonly password: any;
readonly loginButton: any;

当前.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": {
    }
}

问题根源是当前使用的@babel/eslint-parser无法正确解析TypeScript专属语法（如类的readonly属性、类型注解），需要切换为TypeScript专用的ESLint工具链，并修正代码中的不规范问题。

1. 安装TypeScript ESLint依赖 #

执行命令安装核心依赖：

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. 修改.eslintrc.js配置 #

替换原有解析器和规则集，适配TypeScript：

module.exports = {
    "env": {
        "es2021": true,
        "node": true,
        "browser": true // 适配Playwright操作页面的浏览器环境
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended" // 启用TypeScript推荐规则
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parser": "@typescript-eslint/parser", // 替换为TypeScript专用解析器
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": "./tsconfig.json" // 关联项目的tsconfig，提升类型解析准确性
    },
    "plugins": [
        "@typescript-eslint" // 加载TypeScript插件
    ],
    "rules": {
        // 可根据项目需求自定义规则，例如关闭any类型的检测
        // "@typescript-eslint/no-explicit-any": "off"
    }
}

3. 修正代码中的TypeScript不规范问题 #

• 给方法参数添加类型注解：

  async enterUsername(text: string) {
      await this.userName.fill(text);
  }
  
  async enterPassword(text: string) {
      await this.password.fill(text);
  }
  

• 替换any类型为Playwright的Locator类型：

  import { Page, Locator } from "@playwright/test";
  
  export class LoginPage {
      readonly page: Page;
      readonly userName: Locator;
      readonly password: Locator;
      readonly loginButton: Locator;
      // 其余代码保持不变
  }
  

4. 重新验证ESLint #

执行命令重新检测代码：

npx eslint "./src/**" --cache

完成以上步骤后，ESLint解析错误应该会被修复，GitHub PR的检查也能顺利通过。

内容的提问来源于stack exchange，提问作者simpleMan