帶有 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",
  });