构建CI系统：能否用Puppeteer自动化Chrome DevTools指定交互？

绝对可以用Puppeteer实现你需要的这些DevTools交互，而且确实比Sikuli更适合CI场景——Puppeteer直接基于Chrome DevTools协议工作，不需要依赖图像识别，完全不受屏幕分辨率、UI布局微调的影响，稳定性和可维护性都强得多。

下面是具体的实现步骤和代码示例：

核心思路 #

DevTools本身是一个运行在Chrome上的网页应用，Puppeteer可以直接获取DevTools的页面上下文，通过执行DevTools前端内置的API来模拟用户操作，比如切换面板、选择节点等。

完整代码示例 #

const puppeteer = require('puppeteer');

(async () => {
  // 启动Chrome，自动打开DevTools并使用非无头模式（CI环境需配合图形化容器）
  const browser = await puppeteer.launch({
    headless: false,
    devtools: true,
    defaultViewport: { width: 1200, height: 800 }
  });

  // 打开目标页面
  const page = await browser.newPage();
  await page.goto('https://your-target-page.com'); // 替换为你的测试页面URL

  // 获取DevTools的页面实例（DevTools本身是独立的Chrome页面）
  const devtoolsTargets = await browser.targets();
  const devtoolsTarget = devtoolsTargets.find(
    target => target.type() === 'page' && target.url().startsWith('devtools://')
  );
  const devtoolsPage = await devtoolsTarget.page();

  // 1. 切换到Elements面板
  await devtoolsPage.evaluate(() => {
    // DevTools前端内置API：激活Elements面板
    UI.panels.elements.show();
  });

  // 2. 选择目标节点（这里用选择器定位，你可以根据需求调整）
  // 先在主页面找到目标节点，获取它的远程对象ID
  const nodeHandle = await page.$('#your-target-node'); // 替换为你的节点选择器
  const remoteObject = await nodeHandle.remoteObject();
  
  // 通知DevTools选中该节点，模拟用户点击选择的操作
  await devtoolsPage.evaluate((objectId) => {
    SDK.domModel.inspectObject(objectId);
  }, remoteObject.objectId);

  // 3. 切换到Accessibility面板
  await devtoolsPage.evaluate(() => {
    // 激活Accessibility面板
    UI.panels.accessibility.show();
  });

  // 可选：截图验证操作结果
  await devtoolsPage.screenshot({ path: 'accessibility-panel-verification.png' });

  // CI环境中可以执行完操作后关闭浏览器，调试时可注释此行
  // await browser.close();
})();

关键步骤解释 #

• 启动配置：devtools: true确保Chrome启动时自动打开DevTools，headless: false是必须的（新版Puppeteer的headless: "new"模式对DevTools面板支持有限）。CI环境运行时，需要配合xvfb等工具提供虚拟显示环境。
• 获取DevTools页面：通过browser.targets()找到DevTools对应的页面目标，这样就能在DevTools的上下文里执行操作面板的JS代码。
• 切换面板：DevTools前端提供了UI.panels对象，包含所有内置面板的引用，调用show()方法即可切换到对应面板。
• 选择节点：先在主页面定位到目标节点，获取它的远程对象ID，再通过SDK.domModel.inspectObject()通知DevTools选中该节点，完全模拟用户手动选择节点的行为。

对比Sikuli的优势 #

• 稳定性：Puppeteer基于协议交互，不需要图像匹配，不会因为DevTools UI的微小更新（比如按钮位置变化）失效。
• 可维护性：代码基于明确的API调用，比图像识别脚本更容易调试和修改。
• CI适配性：虽然需要虚拟显示环境，但比Sikuli对CI环境的兼容性更好，不需要处理图像分辨率、缩放等问题。

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