Puppeteer点击SAVE DETAILS按钮无响应并挂起问题求助

问题详情 #

网页中有一个按钮无法正常点击，使用Puppeteer点击时程序会挂起，按钮实际未被触发。已尝试至少20种点击方式，均出现程序停滞、无后续执行的情况，代码其余部分运行正常。

相关信息 #

按钮元素 #

<button data-v-1516c9a2="" class="q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle bg-primary text-white q-btn--actionable q-focusable q-hoverable q-btn--active" tabindex="0" type="submit" filled="">
  <span class="q-focus-helper" tabindex="-1"></span>
  <span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
    <span class="block">SAVE DETAILS</span>
  </span>
  <!---->
</button>

控制台日志 #

• 0: JSHandle:undefined
• 1: JSHandle:0
• 2: JSHandle:123
• 3: JSHandle:123
• 4: JSHandle:ASDDDDDDDDDDDDDDDDDDDDDDDDDDDD

Puppeteer日志 #

puppeteer:protocol:RECV ◀ [
puppeteer:protocol:RECV ◀ '{"method":"Runtime.consoleAPICalled","params":{"type":"log","args":[{"type":"undefined"},{"type":"number","value":0,"description":"0"},{"type":"number","value":123,"description":"123"},{"type":"number","value":123,"description":"123"},{"type":"string","value":"ASDDDDDDDDDDDDDDDDDDDDDDDDDDDD"}]... "stackTrace":{"callFrames":[{"functionName":"onSubmit"...

已尝试的代码实现 #

Code V1 #

await page.evaluate(() => {
    const spanElements = document.querySelectorAll('span');
    for (const spanElement of spanElements) {
        if (spanElement.textContent.trim() === 'SAVE DETAILS') {
            spanElement.click();
            console.log('found!!');
            break; 
        }
    }
});

Code V2 #

try {
    await page.waitForSelector('span', { visible: true });
    const spanSelector = await page.evaluate(() => {
        const spanElements = document.querySelectorAll('span');
        console.log(`Found ${spanElements.length} span elements`);

        for (const spanElement of spanElements) {
            if (spanElement.textContent.trim() === 'SAVE DETAILS') {
                console.log('Found the SAVE DETAILS span element.');
                return spanElement; // Return the element itself
            }
        }
        return null;
    });

    if (spanSelector) {
        const result = await page.evaluate(span => {
            span.focus();
            span.click();
            return true;
        }, spanSelector);

        if (result) {
            console.log('Clicked the SAVE DETAILS span element successfully.');
        } else {
            console.log('Failed to click the SAVE DETAILS span element.');
        }
    } else {
        console.log('SAVE DETAILS span element not found.');
    }
} catch (error) {
    console.error('Error during script execution:', error);
}

解决建议 #

1. 直接定位按钮元素而非子span：按钮本身是type="submit"的提交按钮，优先操作按钮而非内部文本span，可用以下选择器定位：

   // 方法1：通过按钮文本定位
   const saveBtn = await page.waitForXPath('//button[contains(., "SAVE DETAILS")]');
   // 方法2：通过独特class组合定位
   const saveBtn = await page.waitForSelector('button.q-btn.bg-primary[type="submit"]');
   

2. 使用Puppeteer原生点击方法：避免在page.evaluate内调用DOM的click()，改用Puppeteer的元素点击方法，它会模拟真实用户的完整点击事件链：

   await saveBtn.click({ delay: 100 }); // 增加小延迟模拟真实点击节奏
   

3. 处理可能的阻塞场景：点击后挂起大概率是页面出现未处理的弹窗、加载遮罩，或表单提交后页面加载停滞，可添加超时或导航监听：

   // 点击超时处理，避免程序一直挂起
   await Promise.race([
       saveBtn.click(),
       page.waitForTimeout(5000).then(() => console.log('点击超时，继续执行'))
   ]);
   // 若点击后页面跳转，同步监听导航完成
   await Promise.all([
       saveBtn.click(),
       page.waitForNavigation({ waitUntil: 'networkidle2' })
   ]);
   

4. 直接触发表单提交：既然按钮是提交类型，可找到其所属表单直接调用提交方法：

   await page.evaluate(() => {
       const form = document.querySelector('button[type="submit"]').closest('form');
       if (form) form.submit();
   });
   

5. 禁用默认导航等待：如果点击后无页面跳转，但Puppeteer默认等待导航完成导致挂起，可禁用该行为：

   await saveBtn.click({ waitForNavigation: false });
   

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