如何避免Playwright忽略多次按键，无需sleep实现稳定测试？

云上老周

2026-8-2

无需sleep实现稳定的Enter按键循环测试

问题根源

循环内过快连续执行keyboard.press会导致浏览器来不及处理所有按键事件，造成操作丢失。硬编码sleep的方式可靠性差，无法适配不同环境的处理速度。

替代方案

1. 基于焦点变化的等待（最可靠）

如果每次按下Enter后焦点会发生变化（比如切换到下一个表单元素），可以等待焦点完成移动后再执行下一次按键，确保浏览器完全处理当前操作：

for (let i = 0; i < 10; i++) {
  // 记录当前焦点元素
  const currentFocused = await this.page.evaluate(() => document.activeElement);
  // 执行Enter按键
  await this.page.keyboard.press('Enter');
  // 等待焦点离开当前元素，确认按键已被处理
  await this.page.waitForFunction(
    prevEl => document.activeElement !== prevEl,
    currentFocused
  );
}

// 验证XYZ元素是否获得焦点
const isFocused = await this.page.$eval('#XYZ', el => el === document.activeElement);
expect(isFocused).toBe(true);

2. 使用带延迟的type方法

如果没有明确的UI变化可等待，可利用Playwright内置的type方法，通过delay参数控制按键间隔，避免过快触发：

// 输入10次Enter，每个按键间隔100ms（可根据实际调整）
await this.page.keyboard.type('\n'.repeat(10), { delay: 100 });

// 检查焦点状态
await expect(this.page.locator('#XYZ')).toBeFocused();

3. 等待浏览器事件循环空闲

通过等待页面加载状态，确保当前按键的所有处理逻辑完成后再继续：

for (let i = 0; i < 10; i++) {
  await this.page.keyboard.press('Enter');
  // 等待网络空闲（或根据场景选择'domcontentloaded'）
  await this.page.waitForLoadState('networkidle');
}

// 验证焦点
await expect(this.page.locator('#XYZ')).toBeFocused();