为什么用Playwright无法获取textarea中的内容？

• 精准定位textarea元素
  你当前定位的是外层容器div，textarea是它的子元素，Playwright提供了专门针对表单输入框的inputValue()方法，更适合获取textarea的内容。先调整定位器直接指向textarea：

  // 定位容器下的第一个textarea
  const textarea = page.locator("(//div[@class='p-card p-component'])[1] textarea");
  console.log(await textarea.inputValue());
  

• 处理受控组件场景
  如果textarea是React/Vue等框架的受控组件，内容可能仅存在组件状态中，未同步到DOM的value属性，这时可以用evaluate()直接在浏览器上下文里读取元素的value：

  const content = await page.locator("(//div[@class='p-card p-component'])[1] textarea").evaluate(el => el.value);
  console.log(content);
  

• 验证定位的准确性
  先确认你的容器div下确实存在textarea元素，避免定位错误：

  // 获取容器下所有子元素的标签名
  const children = await page.locator("(//div[@class='p-card p-component'])[1] >> *").all();
  for (const el of children) {
    console.log(await el.tagName());
  }
  

• 等待元素加载完成
  如果textarea是动态渲染的，要确保元素已可见后再获取内容：

  const textarea = page.locator("(//div[@class='p-card p-component'])[1] textarea");
  await textarea.waitFor({ state: "visible" });
  console.log(await textarea.inputValue());
  

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