使用Puppeteer调用waitForSelector时持续超时的问题排查

核心问题：页面需要手动触发职位加载 #

目标网站https://erecruit.wsib.on.ca/PSHREXTP/start.html打开后不会自动加载职位列表，必须点击页面上的Search Jobs按钮才会触发数据加载。你的代码跳过了这一步，自然无法找到目标选择器对应的元素，导致超时。

具体修复步骤 #

1. 添加按钮点击逻辑：在page.goto之后，先等待搜索按钮出现并点击，触发职位数据加载。
2. 验证选择器有效性：点击搜索后，用浏览器开发者工具确认职位列表的选择器是否正确。
3. 优化页面加载等待策略：调整page.goto的waitUntil参数，确保页面基础资源加载完成。

修复后的代码示例：

const puppeteer = require("puppeteer");

(async () => {
    const browser = await puppeteer.launch({
        executablePath: '/usr/bin/google-chrome-stable',
        // 测试时可开启以下参数，直观查看页面操作
        // headless: false,
        // defaultViewport: null
    });

    const page = await browser.newPage();
    const url = "https://erecruit.wsib.on.ca/PSHREXTP/start.html";
    const searchBtnSelector = "input#HRS_CE_SEARCH_BTN\\$0"; // 搜索按钮选择器
    const jobSelector = "table#tdgbrHRS_CE_JO_EXT_I\\$0 tbody tr";

    // 等待页面静态资源加载完毕
    await page.goto(url, { waitUntil: 'networkidle2' });

    // 等待并点击搜索按钮
    await page.waitForSelector(searchBtnSelector);
    await page.click(searchBtnSelector);

    // 等待职位列表加载完成
    await page.waitForSelector(jobSelector);

    const jobs = await page.evaluate((selector) => {
        const quoteList = document.querySelectorAll(selector);
        return Array.from(quoteList).map((item) => item.outerHTML);
    }, jobSelector);

    console.log(JSON.stringify(jobs));
    await browser.close();
})();

其他排查方向 #

• 反爬机制：若点击后仍无法加载，可添加自定义user-agent模拟真实浏览器：

  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36');
  

• iframe嵌套：检查职位列表是否在iframe中，若是需先切换到iframe：

  const iframe = await page.waitForFrame(frame => frame.url().includes('job-list'));
  await iframe.waitForSelector(jobSelector);
  

• 选择器转义：确保选择器中的特殊字符（如$）已正确转义，避免匹配失败。

内容的提问来源于stack exchange，提问作者sofname