如何从剧作家那里读取文本框的值

Question

我在页面上输入了 ID 为“email30”的文本字段，我正在尝试从 Playwright 读取它的值

  let dd_handle = await page.$("#email30");
  let value = await dd_handle.getAttribute("value");

但是它返回“”，尽管我在输入文本中有一个值。当我检查时，我也没有看到 value 属性设置为当前值。

下面的普通 JS 代码给了我正确的值

document.getElementById("email30").value

不确定如何从剧作家框架中读取价值。任何人都可以建议吗？他们的文件在这里完全没有帮助。

原文由 Paresh Varde 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如何使用剧作家/木偶操纵者检索输入值存在三个主要趋势。

page.evaluate

 const value = await page.evaluate(el => el.value, await page.$('input'))

page.$eval

 const value = await page.$eval('input', el => el.value)

page.evaluate 与 Element.getAttribute

 const value = await page.evaluate(() => document.querySelector('input').getAttribute('value'))

前两个将以非常相似的性能返回相同的结果，我无法举出一个我们可以偏爱另一个的例子（也许一个：带有 $eval 的那个更短）。如果您在评估前操作输入值并且想要检索新值，则不建议使用 Element.getAttribute 的第三个。它将始终返回原始属性值，在大多数情况下是一个空字符串。这是 JavaScript 中 属性 与 属性 值 的主题。

但是 page.evaluate 和 Element.getAttribute 当您需要使用其他提到的方法无法访问的属性时（例如：类名、数据属性、aria 属性等），可以派上用场

原文由 theDavidBarton 发布，翻译遵循 CC BY-SA 4.0 许可协议