让浏览器自己工作：AI自动化技术落地全攻略【AI助力全员提效方向】-京东云开发者社区

### 自动化技术的演进与现状

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

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

### 传统自动化VS智能自动化

#### 流程图

传统自动化
![](https://s3.cn-north-1.jdcloud-oss.com/shendengbucket1/2025-08-16-16-08nqOpYA88vJpv6HW.png)

智能自动化
![](https://s3.cn-north-1.jdcloud-oss.com/shendengbucket1/2025-08-16-16-12PkSL8T9sAXspXh8.png)

#### 各自特点

| 维度 |传统自动化  |智能自动化  |
| --- | --- | --- |
| 元素定位 | 精确选择器匹配 | 视觉特征+语义理解混合定位 |
| 流程设计 | 固定工作流 | 基于目标的动态路径生成 |
| 异常处理 | 预设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/);
}
```
<span style="color: #f62323">**痛点：元素ID变更即导致脚本失败**</span>

#### 智能自动化
```
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: "成功登录"
  });
}
```
<span style="color: #37ee12">**优势：自动适应登录表单结构调整**</span>

### 使用技术

#### Playwright是什么？

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

* 端到端（E2E）测试
* UI 自动化
* 网页截图 & PDF 生成
* 爬取动态渲染的网页
* 性能监控

详细介绍可参考此篇文章：[点我跳转](http://sd.jd.com/article/38565?shareId=62555&isHideShareButton=1)

#### MidScene.js是什么？

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

* AI 增强型自动化：将大语言模型（LLM）与自动化脚本结合
* 低代码/无代码友好：支持自然语言描述任务场景
* 多模态交互：处理文本、图像、结构化数据等多种输入
* 企业级扩展：支持私有化部署和垂直领域微调

#### 技术架构

![](https://s3.cn-north-1.jdcloud-oss.com/shendengbucket1/2025-08-16-16-52QLnRxGFUbdOhU8k.png)

#### 网页或移动应用

##### 网页自动化

* 与 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);

// 👀 初始化 Midscene agent 
    const agent = new PuppeteerAgent(page);

// 👀 执行搜索
    // 注：尽管这是一个英文页面，你也可以用中文指令控制它
    await agent.aiAction('在搜索框输入 "Headphones" ，敲回车');
    await sleep(5000);

// 👀 理解页面，提取数据
    const items = await agent.aiQuery(
      '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格',
    );
    console.log("耳机商品信息", items);

// 👀 用 AI 断言
    await agent.aiAssert("界面左侧有类目筛选功能");

await browser.close();
  })()
);
```

* 与Playwright集成

安装依赖
```
npm install @midscene/web playwright @playwright/test tsx --save-dev 
```

demo代码
```
import { chromium } from 'playwright';
import { PlaywrightAgent } from '@midscene/web/playwright';
import 'dotenv/config'; // read environment variables from .env file

const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

Promise.resolve(
  (async () => {
    const browser = await chromium.launch({
      headless: true, // 'true' means we can't see the browser window
      args: ['--no-sandbox', '--disable-setuid-sandbox'],
    });

const page = await browser.newPage();
    await page.setViewportSize({
      width: 1280,
      height: 768,
    });
    await page.goto('https://www.ebay.com');
    await sleep(5000); // 👀 init Midscene agent
    const agent = new PlaywrightAgent(page);

// 👀 type keywords, perform a search
    await agent.aiAction('type "Headphones" in search box, hit Enter');

// 👀 wait for the loading
    await agent.aiWaitFor('there is at least one headphone item on page');
    // or you may use a plain sleep:
    // await sleep(5000);

// 👀 understand the page content, find the items
    const items = await agent.aiQuery(
      '{itemTitle: string, price: Number}[], find item in list and corresponding price',
    );
    console.log('headphones in stock', items);

const isMoreThan1000 = await agent.aiBoolean(
      'Is the price of the headphones more than 1000?',
    );
    console.log('isMoreThan1000', isMoreThan1000);

const price = await agent.aiNumber(
      'What is the price of the first headphone?',
    );
    console.log('price', price);

const name = await agent.aiString(
      'What is the name of the first headphone?',
    );
    console.log('name', name);

const location = await agent.aiLocate(
      'What is the location of the first headphone?',
    );
    console.log('location', location);

// 👀 assert by AI
    await agent.aiAssert('There is a category filter on the left');

// 👀 click on the first item
    await agent.aiTap('the first item in the list');

await browser.close();
  })(),
);
```

* Chrome 桥接模式（Bridge Mode）
 使用 Midscene 的 Chrome 插件桥接模式（Bridge Mode），你可以用本地脚本控制桌面版本的 Chrome。你的脚本可以连接到新标签页或当前已激活的标签页。

使用桌面版本的 Chrome 可以让你复用已有的 cookie、插件、页面状态等。你可以使用自动化脚本与操作者互动，来完成你的任务。
![image.png](https://s3.cn-north-1.jdcloud-oss.com/shendengbucket1/2025-08-16-21-41rmZbKBDYSWJcAIy.png)

安装依赖
```
npm install @midscene/web tsx --save-dev
```

demo脚本
```
import { AgentOverChromeBridge } from "@midscene/web/bridge-mode";

const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
Promise.resolve(
  (async () => {
    const agent = new AgentOverChromeBridge();

// 这个方法将连接到你的桌面 Chrome 的新标签页
    // 记得启动你的 Chrome 插件，并点击 'allow connection' 按钮。否则你会得到一个 timeout 错误
    await agent.connectNewTabWithUrl("https://www.bing.com");

// 这些方法与普通 Midscene agent 相同
    await agent.ai('type "AI 101" and hit Enter');
    await sleep(3000);

await agent.aiAssert("there are some search results");
    await agent.destroy();
  })()
);
```

启动 Chrome 插件
![image.png](https://s3.cn-north-1.jdcloud-oss.com/shendengbucket1/2025-08-16-21-43ES0wLA6DVK6ZcNq.png)

运行脚本
```
tsx demo-new-tab.ts
```

##### Android 自动化

可以通过安装MCP工具，操作安卓端

#### 关键工具

* 更快,通过设置缓存,可以大幅减少AI服务相关步骤的执行时间

```
MIDSCENE_CACHE=1 playwright test --config=playwright.config.ts
```
**MIDSCENE_CACHE=1**
这是一个环境变量，设置为 1 表示启用 Midscene.js 的缓存功能。在测试运行时，Midscene.js 会尝试复用之前缓存的资源（如渲染结果、静态文件等），从而加速测试执行。

**playwright test**
运行 Playwright 的测试脚本。

**--config=playwright.config.ts**
指定 Playwright 的配置文件路径（这里是 TypeScript 格式的配置文件）。

* 更标准，支持MCP
```
{
  "mcpServers": {
    "mcp-midscene": {
      "command": "npx",
      "args": ["-y", "@midscene/mcp"],
      "env": {
        "MIDSCENE_MODEL_NAME": "REPLACE_WITH_YOUR_MODEL_NAME",
        "OPENAI_API_KEY": "REPLACE_WITH_YOUR_OPENAI_API_KEY",
        "MCP_SERVER_REQUEST_TIMEOUT": "800000"
      }
    }
  }
}
```

#### API
```
交互方法
agent.aiAction() 或 .ai()  # UI 操作步骤
agent.aiTap()   #点击某个元素
agent.aiHover()  # 鼠标悬停某个元素上
agent.aiInput()  # 在某个元素中输入文本
agent.aiKeyboardPress()  # 按下键盘上的某个键、
agent.aiScroll()  # 滚动页面或某个元素
agent.aiRightClick() # 右键点击某个元素
数据提取
agent.aiAsk()  # 针对当前页面，直接向 AI 模型发起提问，并获得字符串形式的回答
agent.aiQuery() # 直接从 UI 提取结构化的数据
agent.aiBoolean() # 从 UI 中提取一个布尔值
agent.aiNumber()  # 从 UI 中提取一个数字
agent.aiString()  # 从 UI 中提取一个字符串
断言等
agent.aiAssert()  # 进行结果断言

更多参考官网
```

### 案例实操
已当前测试登录页面为例，进行了实操
![image.png](https://s3.cn-north-1.jdcloud-oss.com/shendengbucket1/2025-08-18-20-29TRHNtE33HTOHsKfg.png)