如何让forEach循环结合async/await代码顺序执行（Playwright场景）

需求背景 #

输入邮箱（如abc@example.com）时会弹出关联联系人推荐列表，点击匹配姓名后，姓名会以胶囊式标签（类似StackOverflow添加问题标签的样式）加入输入框；点击输入框空白区域可重复操作添加更多联系人，最终输入框呈现类似ABC, DEF |(光标)的样式。

代码实现 #

添加联系人的代码（代码段A） #

inviteeDetails = [
    {
     name: "ABC",
     email: "abc@example.com"
    }, 
    {
     name: "DEF",
     email: "def@example.com"
    }, 
    {
     name: "GHI",
     email: "ghi@example.com"
    }]

async function addInvitees(inviteeDetails) {
    inviteeDetails.forEach(async (invitee) => {
      // 输入邮箱
      await page.getByTestId("parent").getByRole("textbox").fill(invitee.email);
      // 点击推荐列表中匹配的姓名
      await page.getByTestId("result-list-item").nth(0).click();
    });
}

await addInvitees(inviteeDetails);

验证代码 #

const allNames = await page.getByTestId("invitee-details").getByTestId("invitee-name").allInnerTexts();
console.log("ALL NAMES", allNames);

问题现象 #

• 使用代码段A循环执行时，allNames数组为空；
• 手动逐行执行代码段A逻辑时，allNames能正确获取到["ABC", "DEF", "GHI"]。

调试结果 #

通过Playwright Inspector和控制台日志观察到：

1. 邮箱填充代码先执行3次，输入所有邮箱；
2. 随后直接执行获取allNames的代码并打印空数组；
3. 最后才执行3次点击推荐项的代码。

问题原因 #

forEach方法不支持异步函数的等待机制：

• 当addInvitees里调用forEach时，会立刻遍历完所有元素，触发每个异步回调函数，但不会等待这些异步操作完成；
• addInvitees函数会在forEach遍历结束后直接返回，此时点击推荐项的异步操作还未执行，后续的验证代码就提前运行了，导致获取不到已添加的胶囊标签。

解决方案 #

将forEach替换为**for...of循环**，它可以正确等待每个异步操作完成后再执行下一次循环，保证执行顺序和操作的完整性：

async function addInvitees(inviteeDetails) {
    // 用for...of替代forEach
    for (const invitee of inviteeDetails) {
      // 输入邮箱
      await page.getByTestId("parent").getByRole("textbox").fill(invitee.email);
      // 点击推荐列表中匹配的姓名
      await page.getByTestId("result-list-item").nth(0).click();
      // 可选：如果需要点击输入框空白区域激活下一次输入，添加对应操作
      await page.getByTestId("parent").click();
    }
}

await addInvitees(inviteeDetails);

补充说明 #

如果业务场景允许并行执行（不依赖添加顺序），也可以用Promise.all，但本场景下需要按顺序添加联系人，for...of是更稳妥的选择：

async function addInvitees(inviteeDetails) {
    await Promise.all(inviteeDetails.map(async (invitee) => {
      await page.getByTestId("parent").getByRole("textbox").fill(invitee.email);
      await page.getByTestId("result-list-item").nth(0).click();
    }));
}

注意：并行执行可能会导致输入框操作冲突，因此优先推荐for...of保证顺序执行。

内容的提问来源于stack exchange，提问作者utkarsh-k