让浏览器自己工作：AI自动化技术落地全攻略

自动化技术的演进与现状

在数字化转型的浪潮中，自动化技术已经从简单的脚本执行发展为具备智能决策能力的复杂系统。根据Gartner最新报告，到2025年，超过70%的企业将在其业务流程中采用某种形式的AI驱动自动化。这种转变不仅提高了效率，更重要的是赋予了自动化系统前所未有的适应性和创造力。

传统自动化工具虽然能够完成重复性任务，但面对动态变化的网页元素、复杂的用户交互场景时往往力不从心。这正是AI技术可以大显身手的地方——通过机器学习算法理解上下文，做出智能决策，并实时调整执行策略。

传统自动化VS智能自动化

流程图

传统自动化

智能自动化

各自特点

维度	传统自动化	智能自动化
元素定位	精确选择器匹配	视觉特征+语义理解混合定位
流程设计	固定工作流	基于目标的动态路径生成
异常处理	预设try-catch块	实时诊断+自主恢复
测试数据	静态数据集	动态生成符合业务规则的数据
维护成本	变更导致大量脚本失效	自动适应部分UI变化
执行速度	快(毫秒级响应)	较慢(需AI推理时间)
准确定位	100%精确但脆弱	95%准确但健壮
适用场景	稳定业务流程	动态复杂场景

代码对比

传统自动化

async function testLogin(page) {
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'Pass123!');
  await page.click('#login-btn');
  await expect(page).toHaveURL(/dashboard/);
}

痛点：元素ID变更即导致脚本失败

智能自动化

async function smartLogin(page, ai) {
  const context = {
    pageHTML: await page.content(),
    task: "完成登录操作",
    constraints: "使用有效测试凭证"
  };
  
  const plan = await ai.generateActionPlan(context);
  
  for (const action of plan.actions) {
    if (action.type === 'fill') {
      const element = await ai.locateElement({
        page: page,
        description: action.field
      });
      await element.fill(await ai.generateTestData(action.field));
    }
    // 其他动作类型处理...
  }
  
  const result = await ai.verifyOutcome({
    page: page,
    expected: "成功登录"
  });
}

优势：自动适应登录表单结构调整

使用技术

Playwright是什么？

Playwright 是由 Microsoft 开发的一款 跨浏览器、跨平台 的 Web 自动化与测试工具，支持 Chromium（Chrome/Edge）、Firefox 和 WebKit（Safari）。它提供了一套统一的 API，用于自动化浏览器操作，适用于：

端到端（E2E）测试

UI 自动化

网页截图 & PDF 生成

爬取动态渲染的网页

性能监控

详细介绍可参考此篇文章：点我跳转

MidScene.js是什么？

MidScene.js 是一款面向智能自动化的 AI 场景化编程框架，通过自然语言交互和机器学习能力，赋予传统自动化工具（如 Playwright）认知决策能力。它的核心定位是：

AI 增强型自动化：将大语言模型（LLM）与自动化脚本结合

低代码/无代码友好：支持自然语言描述任务场景

多模态交互：处理文本、图像、结构化数据等多种输入

企业级扩展：支持私有化部署和垂直领域微调

技术架构

网页或移动应用

网页自动化

与 Puppeteer集成
Puppeteer 是一个 Node.js 库，它通过 DevTools 协议或 WebDriver BiDi 提供控制 Chrome 或 Firefox 的高级 API。Puppeteer 默认在无界面模式（headless）下运行，但可以配置为在可见的浏览器模式（headed）中运行。

安装依赖

npm install @midscene/web puppeteer tsx --save-dev

demo脚本

import puppeteer from "puppeteer";
import { PuppeteerAgent } from "@midscene/web/puppeteer";

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
Promise.resolve(
  (async () => {
    const browser = await puppeteer.launch({
      headless: false, // here we use headed mode to help debug
    });

    const page = await browser.newPage();
    await page.setViewport({
      width: 1280,
      height: 800,
      deviceScaleFactor: 1,
    });

    await page.goto("https://www.ebay.com");
    await sleep(5000);

    // 

审核编辑 黄宇