Midscene 用了一个月：AI 视觉驱动的 UI 自动化,真的能替代 Playwright 吗?

我维护过一个有 200 多个 E2E 测试用例的 Playwright 项目。每次产品改 UI——按钮换个位置、加个弹窗——就要花半天去改 selector,身心俱疲。直到我看到 Midscene 这个项目,才意识到原来 UI 自动化也可以”跟它说人话”。

项目背景

Midscene 是字节跳动 web-infra-dev 团队开源的 AI 驱动 UI 自动化框架,GitHub 上 1.28 万星。核心思路是:用自然语言代替选择器。你不需要写 page.click('#submit-button'),而是直接告诉它”点击表单底部的提交按钮”,AI 视觉模型会自己理解页面、定位元素。

支持 Web、Android、iOS,基于 TypeScript 开发,最近更新是 2026 年 4 月底。底层会调用 GPT-4V、Claude、Gemini 之类的视觉大模型来”看”页面。

让我眼前一亮的几个特性

1. 写测试就像跟人说话

来看个例子,经典的登录测试,Playwright 大概长这样:

await page.goto('https://example.com');
await page.locator('input[name="email"]').fill('[email protected]');
await page.locator('input[name="password"]').fill('pass123');
await page.locator('button[type="submit"]').click();
await expect(page.locator('.welcome')).toBeVisible();

Midscene 是这样:

await agent.aiAction('在邮箱输入 [email protected],密码输入 pass123,点击登录');
await agent.aiAssert('页面显示了欢迎信息');

可读性翻倍,而且页面元素改了,只要视觉上还能识别,脚本就不用动。这才是真正的”测试维护成本降低”。

2. 支持视觉断言

aiAssert 这个 API 很神奇。我可以写”产品列表里至少显示了 5 个商品”或者”购物车按钮上有红色的数量徽标”,它会真的调用模型去看页面,做出判断。

以前这种断言要么写一堆 DOM 查询,要么截图后人工比对。现在一行搞定。

3. 自带可视化报告

跑完测试后,它会生成一份很漂亮的 HTML 报告,包括每一步的截图、AI 的”思考过程”(它为什么选了这个元素)、以及失败截图。Debug 起来比看 trace 文件直观多了。

4. 兼容现有生态

最重要的一点:Midscene 没有重新发明轮子。它底层就是 Playwright,所以你原有的 Playwright 项目可以渐进式迁移——AI 写不好的脚本继续用传统选择器,易变的部分换成 AI。

怎么开始用

npm install @midscene/web @midscene/playwright

然后在你的 Playwright 测试里集成:

import { test } from '@playwright/test';
import { PlaywrightAgent } from '@midscene/web/playwright';

test('购物流程', async ({ page }) => {
  const agent = new PlaywrightAgent(page);

  await page.goto('https://shop.example.com');
  await agent.aiAction('搜索 "iPhone 15"');
  await agent.aiAction('把第一个搜索结果加入购物车');
  await agent.aiAssert('购物车数量显示为 1');
});

模型 API 配置走环境变量:

export OPENAI_API_KEY="sk-..."
export MIDSCENE_MODEL_NAME="gpt-4o"

如果不想用 OpenAI,也支持 Claude、Gemini、千问 VL 等等,文档写得比较清楚。

实际用下来的几个痛点

API 成本不低。每次执行一个 AI 操作,后台都要把页面截图发给视觉模型,token 消耗比想象中大。我跑一次完整的 50 个测试用例,大概花掉 1.5-2 美元。如果你是 CI 里每次提交都跑测试,月度成本会上千。

速度比纯 Playwright 慢。每个 AI 操作都要等模型推理,平均比 selector 慢 3-8 秒。一个原本 2 分钟跑完的测试套,用 Midscene 可能要 15 分钟。

AI 偶尔会犯傻。复杂页面或者有歧义的指令(比如”点击右上角的按钮”,但右上角有两个按钮),AI 可能选错。这时候你要么把指令写得更具体,要么 fallback 回 selector 写法。

视觉模型对动态加载敏感。页面如果有大量异步加载、骨架屏、或者动画过渡,AI 截图的时机就很关键。Midscene 内部有一些等待逻辑,但偶尔还是会拍到”加载中”的页面,导致判断失败。

国内访问 OpenAI 麻烦。如果你在国内,OpenAI 的 API 不能直接用,要么走代理,要么换千问 VL/智谱 GLM-4V 之类的国产视觉模型。后者效果略逊一筹,但能用。

跟其他方案的对比

纯 Playwright/Cypress:速度快、成本低、稳定,但维护痛苦。脚本数量上去之后,改 UI 就是噩梦。

Selenium + 传统 CV:老牌方案,但 OCR 和图像匹配的鲁棒性远不如视觉大模型。

TestRigor、Mabl:商业 AI 测试平台,功能强但贵(每月几百到几千美元)。Midscene 是这类工具的开源平替,适合预算敏感的团队。

Anthropic Computer Use API:思路类似,但只支持桌面操作,且目前还在 beta。Midscene 在 web/移动端的成熟度更高。

适合谁用

• 维护中等规模 E2E 测试套件的团队:特别是 UI 改动频繁的项目,Midscene 的维护成本优势会很明显。
• 创业公司、小团队:没有专职 QA 的情况下,产品经理或开发都能用自然语言写测试。
• 希望降低测试编写门槛的团队:新人不用先学 selector 语法。

但如果你的项目对性能极度敏感(比如要跑几千个并发测试),或者预算紧张,继续用 Playwright 更现实。

总结

Midscene 不是要取代 Playwright,而是给它装上了一层”AI 大脑”。在维护成本和编写门槛上,它带来的提升是质变的;但在执行速度和成本上,你确实需要做权衡。

我现在的策略是:核心冒烟测试用 Midscene(可读性高、维护少),回归测试用 Playwright(快、省钱)。两者结合下来,团队的测试维护时间下降了大概 60%。

1.28 万星,字节出品,持续更新——这个项目我相信会越走越远。

GitHub: https://github.com/web-infra-dev/midscene

---

关于作者

柳钉鱼，全栈开发者，GitHub 重度用户。过去 3 年 Star 了 900+ 仓库，这里只写我真正用过或深度调研过的工具。

📧 发现好工具想推荐？发邮件到 [email protected]