javascript - Puppeteer 元素选择返回 null 或超时

Question

我正在尝试使用 puppeteer 从网页上的按钮中提取 innerHTML 值。现在，我只是在等待选择器的出现，以便我可以使用它。

在运行下面的代码时程序超时等待。

const puppeteer = require("puppeteer");

const link =
  "https://etherscan.io/tx/0xb06c7d09611cb234bfcd8ccf5bcd7f54c062bee9ca5d262cc5d8f3c4c923bd32";

async function configureBrowser() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(link);

  return page;
}

async function findFee(page) {
  await page.reload({ waitUntil: ["networkidle0", "domcontentloaded"] });
  await page.waitForSelector("#txfeebutton");
  console.log("boom");
}

const setup = async () => {
  const page = await configureBrowser();
  await findFee(page);
  await browser.close();
};

setup();

如下所示，该元素肯定存在于 HTML 中:

控制台输出:

Answer 1

它适用于用户代理字符串:

const puppeteer = require("puppeteer"); // ^19.0.0

let browser;
(async () => {
  browser = await puppeteer.launch({headless: true});
  const [page] = await browser.pages();
  const ua = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36";
  await page.setExtraHTTPHeaders({"Accept-Language": "en-US,en;q=0.9"});
  await page.setUserAgent(ua);
  const url = "https://etherscan.io/tx/0xb06c7d09611cb234bfcd8ccf5bcd7f54c062bee9ca5d262cc5d8f3c4c923bd32";
  await page.goto(url);
  const btn = await page.waitForSelector("#txfeebutton");
  console.log(await btn.evaluate(el => el.textContent.trim())); // => ($0.56)
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close())
;

对此的一种调试策略是使用 headless: false 尝试相同的脚本并查看它是否有效，然后在 headless 运行时检查 page.content()。您可以看到 Cloudflare 正在检测您的爬虫并显示验证码。

相关:

• Puppeteer can't find elements when Headless TRUE
• Why does headless need to be false for Puppeteer to work?

顺便说一句，configureBrowser 泄漏了对 browser 对象的引用，因此您将永远无法调用 browser.close() 并优雅地终止进程。我推荐上述样板并避免编写过早的抽象。