Playwright中evaluate方法无法使用方括号属性访问器问题

我在Playwright中尝试通过动态属性名，用方括号访问器（如node[propertyName]）获取Web元素的属性值时，会抛出错误：elementHandle.evaluate: ReferenceError: propertyName is not defined，但使用点属性访问器却能正常拿到预期结果。

在浏览器控制台中复现相同逻辑完全正常：

const elements = $$("thead th");
const element = elements[0];
propertyName = "innerText";

const propertyValue2 = element.innerText;
const propertyValue = element[propertyName];

console.log(propertyValue2); // 输出预期属性值
console.log(propertyValue); // 输出预期属性值

但Playwright代码中出现异常：

protected async getElementProperty(): Promise<string> {
    const elements = await this.page.$$("thead th");
    const element: JSHandle = elements[0];
    const propertyName = "innerText";

    const propertyValue1: string = await element.evaluate((node) => node.innerText); // 正常获取值
    const propertyValue2: string = await element.evaluate((node) => node[propertyName]); // 报错ReferenceError: propertyName is not defined
    const propertyValue3: string = await element.evaluate(`(node) => node[${propertyName}]`); // 返回Undefined
    
    return propertyValue;
  }

Playwright的evaluate方法会将回调函数发送到浏览器上下文执行，Node.js环境中定义的propertyName变量默认不会传入浏览器上下文，因此回调函数内无法找到该变量，导致抛出ReferenceError。

使用模板字符串的方式返回undefined，是因为替换后代码变为(node) => node[innerText]——这里的innerText未加引号，浏览器会将其视为变量而非字符串，而浏览器上下文不存在名为innerText的变量，最终返回undefined。

方法1：将属性名作为参数传入evaluate #

把propertyName作为第二个参数传给evaluate，让浏览器上下文能获取到这个变量：

protected async getElementProperty(): Promise<string> {
    const elements = await this.page.$$("thead th");
    const element: JSHandle = elements[0];
    const propertyName = "innerText";

    // 传入propertyName作为回调的第二个参数
    const propertyValue: string = await element.evaluate((node, propName) => node[propName], propertyName);
    
    return propertyValue;
  }

方法2：使用Playwright内置的getProperty方法 #

Playwright提供了专门的getPropertyAPI，更简洁直观，无需处理上下文变量传递：

protected async getElementProperty(): Promise<string> {
    const elements = await this.page.$$("thead th");
    const element: JSHandle = elements[0];
    const propertyName = "innerText";

    const propertyHandle = await element.getProperty(propertyName);
    const propertyValue = await propertyHandle.jsonValue();
    
    return propertyValue;
  }

• evaluate的回调函数支持接收多个参数，这些参数会被序列化后传入浏览器上下文；
• getProperty是Playwright为获取元素属性设计的专用方法，能避免手动处理上下文变量的问题，更推荐使用。

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