谷歌浏览器插件 使用 playwright 回放用户动作键盘按键特殊处理方案

背景

在使用playwright 回放键盘按键的事件，官网推荐使用 press 这个 api，而实际上在回放的过程中，浏览器并没有实际执行这个按键，比如 input 里面执行回车，并没有真实触发事件，虽然 press 这个 api 执行成功了，页面却没有变化。

解决办法

我们需要模拟键盘按键事件，特别是当使用page.press或elementHandle.press时，有时可能不会触发实际的事件监听（比如在输入框内按回车提交表单）。这可能是因为某些框架或自定义组件依赖于原生的键盘事件，而Playwright的press方法可能只是模拟了操作，但未完全按照真实用户的方式触发事件。

为了确保键盘事件能够被正确触发，我们可以考虑使用JavaScript来模拟更真实的键盘事件（包括keydown, keypress, keyup）。

// 使用 JS 模拟按键事件（通用方法）
async function pressWithJS(
  context: Page | Frame,
  element: ElementHandle,
  key: string,
  delay: number
): Promise<void> {
  await context.evaluate((el, { key, delay }) => {
    // 创建并派发键盘事件
    const dispatchKeyEvent = (type: string) => {
      const event = new KeyboardEvent(type, {
        key: key,
        bubbles: true,
        cancelable: true,
        view: window
      });
      el.dispatchEvent(event);
    };
    
    // 顺序派发键盘事件
    dispatchKeyEvent('keydown');
    setTimeout(() => {
      dispatchKeyEvent('keypress');
      setTimeout(() => {
        dispatchKeyEvent('keyup');
      }, delay);
    }, delay);
  }, { key, delay });
}

使用上述方法可以真实触发比如 enter 等键盘事件。