Playwright自动化测试点击登录按钮后已输入的用户名密码被清空问题

• 输入操作执行时机过早：未等待输入框完全加载至可交互状态就调用fill方法，此时前端表单的初始化逻辑尚未执行完成，输入的内容仅更新了DOM显示，未被绑定到表单的响应式状态中，点击登录触发表单状态校验时就会被清空。建议在输入前添加状态等待逻辑，示例写法如下：

  const usernameInput = page.getByRole('textbox', { name: '用户名' })
  await usernameInput.waitFor({ state: 'interactive' })
  await usernameInput.fill('你的测试用户名')
  

• 前端表单配置了失焦校验逻辑：多数业务登录页会给用户名、密码框加失焦后异步校验的逻辑，若脚本输入完成后立刻点击登录，此时异步校验还未返回结果，表单状态未同步更新，点击登录会触发拦截逻辑同时重置表单值。可以在输入完成后主动触发失焦，等待校验完成再执行点击：

  await usernameInput.evaluate(node => node.blur())
  // 可搭配等待校验提示消失的逻辑
  await page.getByText('用户名格式正确').waitFor()
  

• 登录按钮点击时机错误：未等待登录按钮处于可交互状态就触发点击，此时前端的表单提交逻辑还未挂载完成，点击反而触发了表单的默认重置行为。调整点击逻辑为等待按钮可交互后再执行：

  await page.getByRole('button', { name: '登录' }).click({ force: false })
  

• 非标准输入操作导致状态未同步：如果你的脚本是通过page.evaluate直接修改输入框的value属性，没有触发前端框架的输入事件，React/Vue等框架的响应式状态不会捕获到值的变更，点击提交时就会读取到初始的空值。替换为Playwright官方的fill方法即可解决，该方法默认会触发完整的输入事件流，适配主流前端框架的状态监听逻辑。

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