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

8fsztsew  于 2023-04-05  发布在  Node.js
关注(0)|答案(4)|浏览(130)

我有输入文本字段的ID为“email30”的页面上,我试图读取它的值从剧作家

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

然而,它返回“”,尽管我在输入文本中有一个值。当我检查时,我也没有看到value属性被设置为当前值。
正常的JS代码如下给我正确的值

document.getElementById("email30").value

不知道我怎么能从剧作家框架中读到价值。有没有人能给点建议?他们的文件在这里没什么帮助。

anauzrmj

anauzrmj1#

如何检索剧作家/ puppet 师的输入值有三个主要趋势。
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.evaluateElement.getAttribute

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

前两个将返回相同的结果,具有非常相似的性能,我不能提出一个例子,当我们可以偏爱一个比另一个(也许一个:$eval的那个更短)。如果你在计算之前操作一个输入的值,并且你想检索新的值,那么不建议使用第三个Element.getAttribute。它总是返回原始的属性值,在大多数情况下它是一个空字符串。这是JavaScript中attribute vs property value的主题。
但是,当您需要无法使用其他提到的方法访问的属性时,page.evaluateElement.getAttribute可以很方便(例如:类名、数据属性、aria属性等)

4xrmg8kj

4xrmg8kj2#

好了,最后下面的代码为我做了工作!

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

p8ekf7hl3#

这是目前为止效果最好的

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

nimxete24#

Playwright更喜欢定位器而不是Puppeteer风格的$eval方法。使用locator,您可以使用inputValue来获取一个或多个元素的当前输入值。
您还可以直接调用page.inputValue(selector)来获取第一个匹配选择器的输入值,但现在不鼓励这样做,而是支持定位器方法。
下面是几个最小的完整示例:

const playwright = require("playwright"); // ^1.30.0

let browser;
(async () => {
  browser = await playwright.chromium.launch();
  const page = await browser.newPage();
  await page.setContent(`<input value="foo">`);

  console.log(await page.inputValue("input")); // => foo

  const input = page.locator("input");
  await input.fill("bar");
  console.log(await input.inputValue()); // => bar
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

如果有多个元素:

const playwright = require("playwright");

const html = `<input value="foo"><input value="bar">`;

let browser;
(async () => {
  browser = await playwright.chromium.launch();
  const page = await browser.newPage();
  await page.setContent(html);

  console.log(await page.inputValue("input")); // => foo

  const loc = page.locator("input");
  await loc.nth(1).fill("baz");

  // iterate all:
  for (const el of await loc.all()) {
    console.log(await el.inputValue());
  }

  // or make an array (option 1):
  const values1 = await Promise.all(
    [...await loc.all()].map(e => e.inputValue())
  );
  console.log(values1); // => [ 'foo', 'baz' ]

  // or make an array (option 2):
  const values2 = await loc.evaluateAll(els  => els.map(el => el.value));
  console.log(values2); // => [ 'foo', 'baz' ]
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

相关问题