Playwright中(await page).fill方法运行异常，邮箱字段填充内容错误如何处理

问题根因 #

• 代码中const page = browser.newPage(); 缺少await关键字，browser.newPage()是异步API，返回的是Promise对象而非实际的Page实例。后续所有(await page).xxx写法虽然能拿到Page实例，但会导致多个异步操作的执行时序完全不可控，大概率出现填充密码的操作还未完成、输入焦点未切换，甚至两个fill操作命中同一个输入框的情况，最终两个值拼接得到passmail@mail.ru的异常结果。
• 重复的(await page)写法没有必要，会进一步放大异步时序混乱的问题。

修正后代码 #

(async () => {
  const browser = await chromium.launch({
    headless: false,
    slowMo: 5000,
    devtools: true,
  });
  // 补充await直接拿到Page实例
  const page = await browser.newPage();

  // 后续直接用page调用API即可，不需要重复await
  await page.goto("url");

  await page.click("text=Enter");

  // 可选添加等待元素可见逻辑，提升执行稳定性
  await page.waitForSelector('[type="password"]', { state: 'visible' })
  await page.fill('[type="password"]', "pass");

  await page.waitForSelector('[placeholder="Email"]', { state: 'visible' })
  await page.fill('[placeholder="Email"]', "mail@mail.ru");

  await page.click('button:has-text("OK")');

  await page.click('button:has-text("log-in")');
})();

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