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

【问题标题】：How to read a textbox value from a playwright如何从剧作家那里读取文本框值
【发布时间】：2020-10-20 12:09:13
【问题描述】：

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

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

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

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

document.getElementById("email30").value

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

【问题讨论】：

标签： node.js playwright

【解决方案1】：

好的，下面的代码终于为我完成了这项工作！

const value = await page.$eval("#email30", (el) => el.value);

【讨论】：

【解决方案2】：

剧作家/木偶师如何检索输入值的三大趋势。

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 中是 attribute vs property value 的主题。

但是，当您需要使用其他方法无法访问的属性（例如：类名、数据属性、aria 属性等）时，page.evaluate 和 Element.getAttribute 会很方便

【讨论】：

【解决方案3】：

目前为止效果最好

const somevalue = this.page.inputValue('#Name');

【讨论】：

您的答案可以通过添加有关代码的作用以及它如何帮助 OP 的更多信息来改进。