Puppeteer点击元素后代码提前执行，如何替代固定延迟等待页面加载

核心解决思路是摒弃固定时长延迟，改用Puppeteer内置的元素等待API，主动监听目标元素的渲染状态，元素加载完成后立即执行后续操作，既不会浪费多余等待时间，也不会因网络波动导致等待时长不足报错。

• 方案1：使用page.waitForXPath等待目标元素（最适配你的场景）
  你当前通过XPath定位元素，点击button1后直接调用page.waitForXPath监听button2对应的XPath即可。该API会自动轮询检测元素状态，匹配成功后立即返回元素实例，超时未匹配到才抛出错误。
  可通过visible: true参数确保元素不仅被插入DOM树，还已经渲染可见，避免点击失效；也可自定义timeout参数调整超时阈值。

优化后完整代码：

const puppeteer = require("puppeteer");

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    // 页面加载阶段设置等待策略，确保基础资源加载完成
    await page.goto("https://www.sisal.it/scommesse-matchpoint/quote/calcio/serie-a", {
        waitUntil: 'networkidle2'
    });

    const [button1] = await page.$x('//div[@class="marketBar_changeMarketLabel__l0vzl"]/p');
    // 点击动作添加await，确保点击事件触发完成再执行后续逻辑
    await button1.click();

    // 等待目标元素可见，超时时间默认30秒，可自定义timeout参数调整
    const [button2] = await page.waitForXPath('//div[@class="listItem_container__2IdVR white marketList_listItemHeight__1aiAJ marketList_bgColorGrey__VdrVK"]/p[text()="1X2 ESITO FINALE"]', {
        visible: true,
        // timeout: 5000 自定义超时时间示例，单位为毫秒
    });
    await button2.click();
})();

• 方案2：搭配waitForNavigation处理页面跳转场景
  如果点击button1后会触发整页跳转而非局部渲染更新，可以用Promise.all包装点击和等待导航的逻辑，避免出现竞态问题：

await Promise.all([
    button1.click(),
    page.waitForNavigation({ waitUntil: 'networkidle2' })
]);
// 导航完成后再定位button2元素

注意：你的XPath中使用的class带有随机后缀（比如__l0vzl、__2IdVR这类），这类一般是前端框架生成的动态class，站点打包更新后后缀可能变化导致定位失效，建议优先用稳定的属性（比如文本内容、固定的自定义属性data-*）定位元素，进一步提升代码稳定性。

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