Playwright 调试 Web 应用键盘事件：GitHub Copilot 自动化实践

键盘事件调试是 Web 应用开发的关键环节。Playwright 作为跨浏览器自动化框架，可精准模拟用户输入行为，而 GitHub Copilot 能快速生成模拟脚本，显著提升调试效率。

---

1. Playwright 键盘事件核心方法

Playwright 提供链式 API 控制键盘行为：

• page.keyboard.down() 触发按键按下事件
• page.keyboard.up() 触发按键释放事件
• page.keyboard.press() 模拟单次按键完整生命周期
• page.keyboard.type() 执行连续输入

事件流原理：
$$ \text{KeyDown} \rightarrow \text{KeyPress} \rightarrow \text{TextInput} \rightarrow \text{KeyUp} $$
每个事件均携带 key, code, shiftKey 等元数据。

---

2. GitHub Copilot 脚本生成实战

场景需求：测试搜索框的 Ctrl+K 快捷键聚焦功能。

Copilot 提示词：

# 使用 Playwright Python 模拟以下操作：
# 1. 打开 https://example.com
# 2. 按下 Ctrl+K 组合键
# 3. 验证搜索框是否获得焦点

Copilot 生成代码：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("https://example.com")
    
    # 模拟 Ctrl+K 快捷键
    page.keyboard.press("Control+KeyK")
    
    # 验证搜索框焦点状态
    search_box = page.query_selector("#search-input")
    assert search_box.evaluate("el => el === document.activeElement")
    
    browser.close()

---

3. 高级调试技巧

问题定位：

• 使用 page.on("keydown", lambda event: print(event.key)) 捕获原始事件数据
• 通过 expect(page).to_have_url() 断言 URL 变更（如回车跳转）

组合键模拟：

# 模拟 Shift+字母大写输入
page.keyboard.down("Shift")
page.keyboard.press("KeyA")  # 输入大寫 A
page.keyboard.up("Shift")

---

4. 浏览器兼容方案

Playwright 自动处理核心差异：

行为	Chromium	Firefox	WebKit
AltGraph 支持	✅	✅	❌
DeadKey 处理	✅	⚠️	⚠️

通过 browser_context 统一配置：

context = browser.new_context(  
    locale="zh-CN",  
    timezone_id="Asia/Shanghai"  
)

---

最佳实践：

1. 优先使用 press() 而非单独 down()/up() 保证事件完整性
2. 组合键操作需明确指定修饰键（如 Control+）
3. 通过 page.wait_for_timeout(500) 插入观察延迟（仅限调试）

最终效果：Copilot 生成的脚本可覆盖 90% 键盘场景测试，复杂逻辑需结合 Playwright Trace Viewer 分析事件时序。