Select 按 Puppeteer/Playwright 中的标签文本输入

Question

给定以下标记：

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

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

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

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

注意：我不喜欢使用 Playwright 测试库包，因为它不够成熟。另外，我的理解是 Puppeteer 和 Playwright 实际上是一样的，因此这个问题适用于这两个框架。

Answer 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())
;

Answer 2

要扩展@ggorlen 的答案，并使其更类似于测试库，您可以使用 :has-text() pseudo-class 到 select 可访问的名称：

await page.click('label:has-text("Name")');
await page.keyboard.type('hello world');

Select 按 Puppeteer/Playwright 中的标签文本输入

Select input by label text in Puppeteer/Playwright

puppeteer

playwright