使用Playwright点击表单提交按钮超时，元素等待失败求助

问题现象 #

未填写任何输入框时，Save按钮可正常点击；填写10-12个输入框（如#input_01）后，点击按钮出现超时错误。

错误信息 #

locator.click: Timeout 30000ms exceeded.

Call log:

• waiting for locator('//*[@id="ct100_btn"]')
• locator resolved to <input value="Save" type="submit" class="btn" id="../>
• attempting click action
• waiting for element to be visible, enable and stable
• scrolling into view if needed
• done scrolling

相关HTML代码 #

<table>
    <tr>
      <td id="ct100" onscroll="scollPosition(this);">
        <!-- some html form -->
         <input value="Save" type="submit" class="btn" />
      </td>
      <td id="ct101" onscroll="scollPosition(this);">
         <input type="text" id="input_01" onchange="updateValue();" />
         <!-- form input -->
      </td>
</table>

相关Playwright代码 #

async saveSetupPage(): Promise<void> {
    // 未填写任何输入框时，点击提交按钮正常工作 

    await page.locator("#input_01").click();
    await page.locator("#input_01").fill("some value");
    // 用同样的代码填写10-12个输入框

    // 尝试点击提交按钮
    await page.locator("//*[@id='ct100_btn']").click();
}); 

解决方案 #

1. 等待加载元素消失 #

从错误日志里的<div class="UpdateProgress">可以判断，填写输入框后页面可能在执行异步更新，导致按钮一直处于不稳定状态。先等待加载提示消失再点击：

// 等待加载提示隐藏
await page.locator(".UpdateProgress").waitFor({ state: "hidden" });
// 再点击提交按钮
await page.locator("#ct100_btn").click();

2. 调整点击的等待策略 #

如果加载元素不好定位，可放宽点击时的稳定性要求，或延长超时时间：

await page.locator("#ct100_btn").click({
    timeout: 60000, // 把超时时间延长到60秒
    stable: false // 不强制等待元素稳定
});

3. 给页面留稳定时间 #

多个输入框的onchange事件触发updateValue()，可能导致页面频繁更新。填写完所有输入后，等待一小段时间让页面稳定：

// 填写完所有输入后等待1秒（可按需调整时长）
await page.waitForTimeout(1000);
await page.locator("#ct100_btn").click();

4. 修正元素定位器 #

注意到HTML中按钮的实际DOM结构和你的定位器可能存在差异，建议改用更可靠的定位方式：

// 通过class和value属性定位按钮
await page.locator("input.btn[value='Save']").click();

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