在 Puppeteer 中获取具有动态 ID 的元素答案

【问题标题】：Fetch element with dynamic ID in Puppeteer在 Puppeteer 中获取具有动态 ID 的元素
【发布时间】：2021-03-31 20:42:40
【问题描述】：

我正在尝试加载页面并截取登录表单。但是，表格会在一些延迟后显示。因此，如果我将超时设置为 10 秒，那么我可以看到表单。否则我会得到空白页的截图。

但我想在没有超时的情况下这样做，并找到了waitForSelector 函数。问题是，DOM 中的所有元素都动态创建了 ID（例如 form-1234）。我试过这个，但 id 不起作用...

const puppeteer = require('puppeteer');

function delay(time) {
  return new Promise(function(resolve) { 
      setTimeout(resolve, time)
  });
}

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost/login');
  //await delay(10000);
  await page.waitForSelector('[form-^[0-9]]');
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})()

【问题讨论】：

标签： javascript puppeteer

【解决方案1】：

[form-^[0-9]] 不是有效的 CSS 选择器。

如果您想等待id 以form- 开头的任何元素，您可以使用attribute-starts-with selector (^=)：[id^=form-]

也许：

(async () => {
    try {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        await page.goto("http://localhost/login");
        await page.waitForSelector("[id^=form-]");     // ***
        await page.screenshot({ path: "example.png" });
      
        await browser.close();
    } catch (e) {
        // ...handle/report error...
    }
})();

【讨论】：