如何使用Selenium JavaScript等待表单提交刷新后循环提交多条目

核心问题分析 #

你的代码存在三个关键问题：

1. forEach搭配async函数无法保证循环顺序，所有迭代会并行执行，导致多次填写操作同时触发。
2. 提前查找的表单元素在页面刷新后会变为失效元素（Stale Element），后续操作会报错。
3. field3.sendKeys("value", item.type)的参数格式错误，sendKeys需要的是字符串序列，而非这种拼接方式。

修正后的完整代码 #

const { By, until } = require('selenium-webdriver');

// 用for...of替代forEach，确保每次循环等待前一次操作完成
for (const item of ctn.Items) {
    // 每次循环重新查找元素，避免页面刷新后元素失效
    const field1 = await driver.findElement(By.name('field1'));
    await field1.clear(); // 清空输入框，避免残留内容
    await field1.sendKeys(item.number);

    const field2 = await driver.findElement(By.name('field2'));
    await field2.clear();
    await field2.sendKeys(item.name);

    // 修复field3的sendKeys：拼接字符串或传递序列
    const field3 = await driver.findElement(By.name('field3'));
    await field3.clear();
    // 若要输入"value"+item.type，直接拼接成单个字符串
    await field3.sendKeys(`value${item.type}`);
    // 若要分两次输入（先输"value"再输item.type），可传多个参数：
    // await field3.sendKeys("value", item.type);

    const field4 = await driver.findElement(By.name('field4'));
    await field4.clear();
    await field4.sendKeys(item.description);

    // 提交表单
    const submitBtn = await driver.findElement(By.xpath('//*[@id="item"]/form/table[1]/tbody/tr[2]/td/div/input[1]'));
    await submitBtn.click();

    // 等待页面刷新完成：优先选择业务关联的等待条件（最可靠）
    // 示例1：等待新增条目出现（假设条目有统一的CSS类.item-row）
    const initialItemCount = (await driver.findElements(By.css('.item-row'))).length;
    await driver.wait(
        until.elementLocated(By.css(`.item-row:nth-child(${initialItemCount + 1})`)),
        10000 // 超时时间10秒
    );

    // 备选方案：等待页面加载完成（适合整页刷新场景）
    // await driver.wait(async () => {
    //     return driver.executeScript('return document.readyState === "complete"');
    // }, 10000);

    // 备选方案：等待提交按钮重新渲染（适合局部刷新场景）
    // await driver.wait(
    //     until.elementLocated(By.xpath('//*[@id="item"]/form/table[1]/tbody/tr[2]/td/div/input[1]')),
    //     10000
    // );
}

关键修正说明 #

1. 循环方式替换：for...of会等待每次循环中的所有await操作完成后再进入下一次迭代，彻底解决并行执行的问题。
2. 元素重新查找：页面刷新后，之前定位的元素会失效，每次循环重新查找元素可以避免StaleElementReferenceError。
3. sendKeys参数修正：根据需求选择拼接字符串或传递多个字符串参数，确保输入内容符合预期。
4. 可靠的等待策略：优先等待业务可见的变化（比如新增条目出现），这种等待比单纯等待页面加载完成更准确，能确保表单提交后的页面状态完全就绪。

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