在Playwright中使用TypeScript获取元素类名数组的最优方法

Playwright确实没有专门返回元素类名数组的API，你自己实现的思路是可行的，不过可以进一步简化代码，让它更高效简洁：

优化后的实现 #

export const getClassNames = async (locator: Locator): Promise<string[]> => {
    // 确保定位器仅匹配一个元素
    await expect(locator).toHaveCount(1);
    // 直接通过evaluate返回类名数组
    return locator.evaluate((el: Element) => Array.from(el.classList));
};

优化点说明 #

• 去掉了evaluateHandle和jsonValue的步骤：evaluate方法会自动将浏览器端返回的数组序列化并传递到Node.js环境，无需额外创建句柄再转换，减少了异步操作层级，性能更优。
• 移除了冗余的locator.first()：因为已经通过toHaveCount(1)校验了元素数量，直接调用locator.evaluate就会作用于唯一匹配的元素。

灵活场景的写法 #

如果你的业务场景不需要严格校验元素数量（比如允许定位器匹配多个元素，仅取第一个的类名），可以简化为：

export const getClassNames = async (locator: Locator): Promise<string[]> => {
    return locator.first().evaluate((el: Element) => Array.from(el.classList));
};

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