拆分定位器文件后出现locator.click解析错误，求技术解答

错误原因 #

你在locator.js中错误地将getByRole的两个参数合并成了单个字符串：

export const loginTab = "'link', { name: 'Login' }";

但getByRole方法需要接收两个独立参数：

1. 第一个是角色类型字符串（如'link'）
2. 第二个是配置对象（如{ name: 'Login' }）

当你把这两个参数拼成一个字符串传入时，Playwright会把整个字符串当作唯一的角色参数解析，自然会触发"unexpected symbol"的语法错误。

修正方案 #

方案1：用数组存储参数，调用时用扩展运算符拆分 #

修改locator.js，将参数存入数组：

// locator.js
export const loginTab = ['link', { name: 'Login' }];

在login.js中调用时，用扩展运算符...将数组拆分为独立参数：

const { loginTab } = require('../locator.js');

class LoginPage {
    constructor(page) {
      super(page);
    }
  
    async clickOnLoginTab() {
      await this.page.getByRole(...loginTab).click();
    }
}

方案2：用对象存储参数，调用时分别传递 #

修改locator.js，用对象明确区分两个参数：

// locator.js
export const loginTab = {
  role: 'link',
  options: { name: 'Login' }
};

在login.js中调用时，分别取出对象的属性作为参数：

const { loginTab } = require('../locator.js');

class LoginPage {
    constructor(page) {
      super(page);
    }
  
    async clickOnLoginTab() {
      await this.page.getByRole(loginTab.role, loginTab.options).click();
    }
}

为什么直接写在login.js里能正常运行？ #

因为此时你直接传递了两个独立的、符合要求的参数给getByRole，没有把它们错误地合并成一个字符串，Playwright可以正确解析。

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