带有 Puppeteer 的 waitForSelector 仅在无头模式下不响应

Question

我对 puppeteer 有一个奇怪的问题，我有以下代码：

try {
    await Promise.all([
        page.waitForSelector(HomeSelector.profileButton),
        cursor.click(HomeSelector.profileButton),
        page.waitForNavigation({ waitUntil: 'networkidle2' })
    ]);
    // Never responds in headless mode
    await page.waitForSelector(ProfileSelector.nameField);


    resolve();
} catch(error) {
    reject(error); 
}

当我使用headless: false运行nameField时，它成功等待选择器nameField但是使用headless: true我只是收到超时错误TimeoutError: waiting for selector 。

我曾尝试更改 waitForNavigation 参数，但这并没有什么区别，我还截取了网站的屏幕截图以确认元素是否存在。

有没有其他人遇到过这个问题？ 任何想法如何解决它？

Answer 1

您有可能在page.waitForSelector(HomeSelector.profileButton)和cursor.click()之间存在一些竞争条件。 尝试先等待page.waitForSelector(HomeSelector.profileButton) ：

try {
    await page.waitForSelector(HomeSelector.profileButton);
    await Promise.all([
        cursor.click(HomeSelector.profileButton),
        page.waitForNavigation({ waitUntil: 'networkidle2' })
    ]);
    await page.waitForSelector(ProfileSelector.nameField);

    resolve();
} catch(error) {
    reject(error); 
}

Answer 2

我的解决方案是在创建新上下文时添加 userAgent，我这样做是因为在检查页面内容是否正在使用屏幕截图访问时await page.screenshot({ path: "screenshot.png" }); 执行后立即await page.goto(url);

await page.goto(url);
await page.screenshot({ path: "screenshot.png" });
await page.waitForSelector("#user-rut");

这有助于我意识到我收到了 403 禁止的 nginx 错误。 显然是headless: true运行headless: true ，木偶操纵者用另一种类型的代理处理它。

我的解决方案是指定 userAgent 以便能够正确加载页面并避免time out Error: page.waitForSelector waiting for selector to be visible

const context = await browser.newContext({
    userAgent:
      "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36",
  });