在 Puppeteer/Playwright 中按标签文本选择输入答案

【问题标题】：Select input by label text in Puppeteer/Playwright在 Puppeteer/Playwright 中按标签文本选择输入
【发布时间】：2021-10-24 22:34:08
【问题描述】：

给定以下标记：

<label for="name">Name</label>
<input type="text" id="name" />

我想在 Playwright 测试中填写输入值。但是，我更喜欢遵循类似于测试库的范例，它像真实用户一样使用选择器（通常是可见的文本内容）。因此，我希望我的 Playwright 选择器使用标签文本。

当我尝试以下操作时，我收到错误 element is not an <input>，因为它选择了实际的标签元素： await page.fill('"Name"')

还有其他方法可以实现吗？

注意：我不热衷于使用 Playwright 测试库包，因为它还不够成熟。另外，我的理解是 Puppeteer 和 Playwright 实际上是相同的，因此为什么这个问题适用于这两个框架。

【问题讨论】：

标签： puppeteer playwright

【解决方案1】：

您可以.click() 标签设置焦点在输入，然后使用page.keyboard.type 输入输入。

这是一个最小的例子：

const puppeteer = require("puppeteer");

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  await page.setContent(`
    <label for="name">Name</label>
    <input type="text" id="name" />
  `);
  await page.click("label[for='name']");
  await page.keyboard.type("hello world");
  console.log(await page.$eval("#name", e => e.value)); // => hello world
  console.log(await page.evaluate(() => document.activeElement.value)); // same
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

【讨论】：

技术真棒！