基于 CDP 协议的浏览器自动化实践：从零构建 Agent 工作流

# 关闭现有 Edge 进程
Get-Process msedge -ErrorAction SilentlyContinue | Stop-Process -Force

# 以调试模式启动
Start-Process "msedge.exe" `
  -ArgumentList "--remote-debugging-port=9222", `
                "--user-data-dir=C:\\EdgeDebugProfile", `
                "--no-first-run", "--no-default-browser-check"

const response = await fetch('http://localhost:9222/json/list');
const pages = await response.json();

// 找到目标页面
const targetPage = pages.find(p => p.url.includes('target-site.com'));
const wsUrl = targetPage.webSocketDebuggerUrl;

const WebSocket = require('ws');
const ws = new WebSocket(wsUrl);

ws.on('open', () => {
  // 启用 DOM 和网络监控
  ws.send(JSON.stringify({ id: 1, method: 'DOM.enable' }));
  ws.send(JSON.stringify({ id: 2, method: 'Network.enable' }));
});

// 执行点击操作
function clickElement(nodeId) {
  ws.send(JSON.stringify({
    id: 3,
    method: 'DOM.querySelector',
    params: { nodeId, selector: 'button#submit' }
  }));
}

async function publishArticle(title, content) {
  // 1. 打开编辑器
  await navigate('https://example.com/editor');
  await waitForLoad('networkidle');
  
  // 2. 填写标题
  const titleInput = await querySelector('input[name="title"]');
  await fill(titleInput, title);
  
  // 3. 切换到 Markdown 模式（避免富文本格式问题）
  const mdTab = await querySelector('.tab-markdown');
  await click(mdTab);
  
  // 4. 填写正文
  const contentArea = await querySelector('textarea#content');
  await fill(contentArea, content);
  
  // 5. 保存草稿
  const saveBtn = await querySelector('button[data-action="save-draft"]');
  await click(saveBtn);
  await waitForSelector('.toast-success');
  
  // 6. 打开发布弹窗
  const publishBtn = await querySelector('button[data-action="publish"]');
  await click(publishBtn);
  
  // 7. 填写发布选项
  await click(await querySelector('input[name="original"]')); // 原创
  await click(await querySelector('.tag-automation')); // 标签
  
  // 8. 确认发布
  await click(await querySelector('button.confirm-publish'));
  
  return await waitForNavigation('/article/');
}

ws.on('message', (data) => {
  const msg = JSON.parse(data);
  if (msg.method === 'DOM.childNodeInserted') {
    if (msg.params.node.nodeName === 'DIV' && 
        msg.params.node.attributes.class?.includes('publish-modal')) {
      handlePublishModal();
    }
  }
});