Question

选择一个input元素并将其填充为特定值很简单

元素

<input class='foo' type="test" name="userName" placeholder="Enter Your Name..." />

带有click（）函数的代码

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--incognito'
    ]
  });
  const page = await browser.newPage()
  await page.goto('...')
  await page.type('input[name=userName]', 'test@test.com')
  ....
})();

我使用input[name=userName]选择想要的HTML元素。但是，当我使用<span />和text属性尝试此操作时，它不起作用。

元素

<span text="foo" id class="bar" />

带有click（）函数的代码

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--incognito'
    ]
  });
  const page = await browser.newPage()
  await page.goto('...')
  await page.type('input[name=userName]', 'test@test.com')
  ....
  await page.waitForNavigation({ waitUntil: load })
  await page.click('span[text=foo]'); // <-- not working
})();

是否有一种直接的方法可以通过附加到其属性上的值来选择input以外的其他元素？

Answer 1

不熟悉Puppeteer。但是在Vanilla JavaScript中，您可以执行以下操作：

document.querySelector('span[text="foo"]');

After a little digging，如下所示是在Puppeteer中的操作方式。

const spanText = await page.evaluate(() => document.querySelector('span[text="foo"]'));

Answer 2

在load中的await page.waitForNavigation({ waitUntil: load })未设置为''，这导致在单击登录按钮后<span />不存在...

单击带有文本属性的<span>不能按预期方式工作

2 个答案: