GitHub Copilot 辅助 Playwright MCP 调试：定位 Web 应用的脚本执行顺序问题

在 Web 应用开发中，脚本执行顺序错误可能导致元素未加载、事件未触发或数据异步加载问题。使用 Playwright MCP（多上下文/多页面）调试时，GitHub Copilot 可智能生成诊断代码，帮助定位执行时序问题。以下是关键步骤：

1. 问题定位：识别执行顺序异常

• 典型症状：
  • 元素选择器失败（如 element not found）
  • 事件监听未生效（如点击无响应）
  • 数据渲染延迟导致断言失败
• Copilot 辅助策略：

  # Copilot 建议：添加执行时序日志
  async def track_execution(page):
      await page.wait_for_load_state("networkidle")  # 确保网络空闲
      print(f"页面加载完成: {page.url}")
      await page.wait_for_selector("#target-element")  # 关键元素等待
      print("目标元素已渲染")
  

2. 调试方案：Playwright 与 Copilot 协同

• 步骤1：注入时序检查点 Copilot 推荐在关键节点插入等待和日志：

  # Copilot 生成：检查脚本执行链
  async def debug_script_order(page):
      # 等待初始脚本执行
      await page.evaluate("window.initialScriptLoaded")
      print("初始脚本已执行")
  
      # 检查动态加载脚本
      await page.wait_for_function("() => window.dynamicScript !== undefined")
      print("动态脚本已加载")
  

• 步骤2：验证事件触发顺序 通过 Copilot 生成事件监听诊断代码：

  # Copilot 建议：记录事件触发时序
  await page.expose_function("logEvent", lambda name: print(f"事件触发: {name}"))
  await page.evaluate("""() => {
      document.addEventListener("click", () => window.logEvent("click"));
      window.addEventListener("load", () => window.logEvent("window.load"));
  }""")
  

3. 高级诊断：依赖图分析

Copilot 可生成脚本依赖关系图代码，可视化执行顺序：

# Copilot 生成：构建脚本依赖图
async def map_dependencies(page):
    dependencies = {}
    scripts = await page.query_selector_all("script")
    
    for script in scripts:
        src = await script.get_attribute("src")
        if src:
            # 分析脚本加载顺序
            dependencies[src] = await page.evaluate("""(script) => {
                return Array.from(script.attributes).map(attr => attr.name);
            }""", script)
    return dependencies

4. 解决方案：修正执行时序

根据 Copilot 的诊断结果，调整脚本加载策略：

• 方案1：显式控制加载顺序

  # Copilot 推荐：强制串行加载
  await page.add_script_tag(url="lib.js")  # 基础库
  await page.wait_for_function("() => window.Lib !== undefined")
  await page.add_script_tag(url="app.js")  # 业务逻辑
  

• 方案2：注入同步屏障

  // Copilot 建议：阻塞关键操作
  window.scriptBarrier = {
      ready: false,
      setReady: () => { this.ready = true; }
  };
  while (!window.scriptBarrier.ready) {
      await new Promise(resolve => setTimeout(resolve, 100));
  }
  

5. 验证效果

使用 Copilot 生成断言代码验证修复：

# Copilot 生成：时序敏感型断言
async def validate_order(page):
    await page.wait_for_selector("#data-container")
    content = await page.text_content("#data-container")
    assert "加载完成" in content, "数据渲染顺序错误"

最佳实践：结合 Playwright 的 trace 功能和 Copilot 的代码建议，生成完整诊断报告：

npx playwright test --trace on

通过 Copilot 的智能辅助，可快速将模糊的“时序问题”转化为可定位的代码缺陷，显著提升调试效率。