如何用Playwright获取页面不可见DOM元素的value属性

你可以直接定位目标textarea元素，通过获取其DOM property的方式拿到value值，无需操作iframe。以下是两种可行的实现方式：

方法一：使用locator直接获取（推荐） #

Playwright的locator.evaluate()可以直接在浏览器上下文里访问元素的属性，代码更简洁：

const selector = '#Manufacturer > div > div:nth-child(1) > div > div.stb-rich-text-fields > div > div:nth-child(1) > div > textarea';
// 直接获取元素的value property
const manufacturerValue = await this.page.locator(selector).evaluate(el => el.value);
console.log(manufacturerValue);

方法二：通过元素handle获取property #

如果你需要保留元素handle进行后续操作，可以用这种方式：

const selector = '#Manufacturer > div > div:nth-child(1) > div > div.stb-rich-text-fields > div > div:nth-child(1) > div > textarea';
// 获取目标元素的handle
const textareaHandle = await this.page.$(selector);
// 获取元素的value property
const valueHandle = await textareaHandle.getProperty('value');
// 转换为可读的字符串值
const manufacturerValue = await valueHandle.jsonValue();
console.log(manufacturerValue);

// 记得释放handle避免内存泄漏
await valueHandle.dispose();
await textareaHandle.dispose();

为什么你的代码执行失败？ #

你之前的错误在于：

• 用evaluateHandle(() => ({window, document}))拿到的是全局对象的handle，不是目标textarea元素的handle，因此调用getProperty('value')根本找不到对应属性。
• 混淆了元素定位和全局对象的操作，必须先定位到目标textarea元素，再去获取它的property。

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