在 Playwright 中获取输入元素的值

Posted 2023-03-16

【中文标题】在 Playwright 中获取输入元素的值

【英文标题】：Getting value of input element in Playwright

【发布时间】：2020-09-12 01:40:17

【问题描述】：

如何返回 elem 的值，以便验证它实际上是 1？

const elem = await page.$('input#my-input')
await elem.fill('1')

【参考方案1】：

最简单的方法是使用$eval。在这里你可以看到一个小例子：

const playwright = require("playwright");

(async () => 
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.setContent(`<input id="foo"/>`);
  await page.type("#foo", "New value")
  console.log(await page.$eval("#foo", el => el.value))
  await page.screenshot( path: `example.png` );
  await browser.close();
)();

【讨论】：

谢谢马克斯。我正在寻找一种简单的方法来检查 html 元素句柄的值。这可能吗？

请注意：您要查找的基本代码是await page.$eval("#foo", el => el.value)。

还要注意$eval() doesn't perform actionability checks（它不会自动等待），因此您可能需要在$eval() 前面加上await page.waitForSelector("#foo") 之类的东西

如果遇到类型问题，可以设置：el as HTMLInputElement;

【参考方案2】：

inputValue 方法已在 Playwright v1.13.0 中添加

await page.inputValue('input#my-input');

它为选定的<input> 或<textarea> 元素返回input.value。抛出非输入元素。 Read more.

【讨论】：

优于$eval()。谢谢！

【参考方案3】：

不推荐使用 1.19 版（可能还有更低版本）的元素处理程序。 而不是使用定位器。

page.locator(selector).innerText()

在你的情况下，它会是

expect(page.locator("input#my-input").innerText().includes("1")).toBeTruthy()

阅读更多： https://playwright.dev/docs/api/class-elementhandle#element-handle-fill