详情介绍
Midscene.js是一个彻底简化UI自动化测试流程的开源工具。它由web-infra-dev团队开发，核心思想是用AI来弥合人类意图与机器执行之间的鸿沟。在传统的UI自动化中，你需要编写精确的代码来定位每一个元素，处理各种异步加载和动态变化。而Midscene.js允许你像对人说话一样，描述你想要执行的操作和想要验证的结果。它通过集成多模态大语言模型，能够“看懂”用户界面，理解你的指令，并自动规划出具体的操作路径。无论是Web应用、移动App还是桌面软件，Midscene.js都提供了一套统一的API和工具链，极大地降低了自动化脚本的编写和维护成本，使得非技术背景的产品经理或设计师也能参与到自动化验证工作中。
官网入口地址
Midscene.js拥有详尽的中文官方网站，提供快速体验、文档和博客等内容。
下载地址
Midscene.js是一个Node.js库，您可以通过npm或yarn等包管理器将添加到您的项目中。具体的安装命令在官网的“快速开始”或GitHub的README中有详细说明。
-
npm安装命令示例（具体请参考官方文档）：
npm install --save-dev @midscene/web
功能介绍
Midscene.js的功能围绕“AI驱动”和“开发者体验”两个核心设计，具体包括：
-
自然语言交互：这是Midscene.js最核心的功能。您可以使用日常语言来描述UI操作，“在搜索框输入‘AI自动化’并点击搜索按钮”。SDK内部的AI Agent会理解意图，分析当前界面的DOM结构和视觉信息，然后自动执行对应的操作。您甚至可以要求以特定格式（如JSON）返回数据，比如“提取页面上所有商品的价格和名称，以JSON数组格式返回”。
-
多模态大语言模型支持：为了理解界面，Midscene.js需要多模态能力的支持。它设计为可插拔的AI后端，既可以接入GPT-4等强大的公有云多模态模型，也可以连接UI-TARS等开源可私有化部署的模型。这赋予了用户根据成本、隐私需求和效果来选择底层AI能力的灵活性。
-
直观断言：验证测试结果是自动化中的关键步骤。Midscene.js允许您直接用自然语言来表达断言，断言“页面上应该显示‘登录成功’的提示信息”。AI会理解这个预期并去界面中验证，无需编写复杂的条件判断代码。
-
可视化报告与调试工具：为了提升调试效率，Midscene.js提供了详尽的可视化报告。报告会以时间线或步骤列表的形式，清晰地展示每个AI指令是如何被理解和执行的，附带了执行前后的界面截图或关键信息。内置的Playground功能允许您在不重新运行整个测试脚本的情况下，单独调整和试运行某条自然语言指令，极大地加速了脚本的调试和优化过程。
-
跨平台与高集成性：Midscene.js的愿景是支持全平台。它提供了统一的API，可以轻松集成到Puppeteer、Playwright等流行的Web自动化工具中，也支持通过YAML脚本定义流程。根据官网信息，能力正在向Android、iOS、HarmonyOS、Linux、macOS和Windows等平台扩展。
-
开源与社区驱动：作为一个开源项目（在GitHub上已获得超过11k Stars），它鼓励社区贡献。用户可以自由地获取源码、提出需求、报告Bug，甚至参与到新功能的开发中。
应用场景
Midscene.js的应用场景覆盖了软件开发和测试的多个环节：
-
端到端自动化测试：编写更贴近业务逻辑、更健壮的UI测试用例。测试脚本不再依赖于易变的元素ID或XPath，而是基于功能描述，即使前端实现细节改变，测试用例往往也能继续工作。
-
智能化数据抓取：从复杂或动态渲染的网页中提取结构化数据。只需用一句话描述你想要什么数据，Midscene.js就能处理各种反爬和异步加载，将结果返回给你。
-
用户界面一致性检查：通过编写自然语言指令，可以自动在不同浏览器或设备上执行相同的操作流程，并利用断言验证界面布局和功能表现是否一致。
-
自动化操作与脚本录制：非技术背景的运营或产品人员，可以通过Midscene.js的Chrome插件或Playground，像录制宏一样，用自然语言生成自动化脚本，用于重复性的工作，如批量上传、数据填报等。
补充必要信息
-
开发团队：Midscene.js由web-infra-dev团队开发，这是一个专注于Web基础设施和开发者工具的开源团队。
-
定价：Midscene.js本身是开源且免费的SDK。但请注意，AI能力的实现需要调用大语言模型。如果您选择使用GPT-4等公有云服务，您需要自行申请API密钥并支付相应的调用费用。如果您选择部署并使用开源模型（如UI-TARS），则只需承担您自己的硬件或云服务器成本。
-
快速体验：官网提供了Chrome插件的下载，允许用户在不搭建完整项目环境的情况下，直接在浏览器中体验用自然语言驱动和调试网页操作，这对于快速了解和评估该工具非常有帮助。
-
技术原理：核心流程为：自然语言解析 -> AI模型理解意图与界面 -> 生成并执行具体操作 -> 验证结果并生成可视化报告。
Midscene.js常见问题
Midscene.js是由一个名为web-infra-dev的开源技术团队开发的，这个团队专注于打造Web基础设施和提升开发者体验的工具。
有的，你可以直接访问它的官网 midscenejs.com，上面有很详细的文档和快速开始指南。想快速体验的话，官网还提供了Chrome插件，装上之后就能在浏览器里直接用自然语言指挥它干活了，非常方便。
它们都是做UI自动化的，但Midscene.js更聪明。Selenium和Playwright需要你精确地告诉它“点哪个按钮、输入什么”，像给机器下指令。而Midscene.js你只需要用大白话告诉它你的目的，比如“登录然后买第一个商品”，它自己会利用AI看懂屏幕，然后去执行这一系列操作。你可以把它想象成一个配备了AI大脑的自动化工具。
上手很快。第一步，在项目里用npm安装一下。第二步，在你的测试代码里引入Midscene.js，然后你就可以用 await page.ai('在搜索框输入 "AI测试" 并点击搜索') 这样的方式来写测试步骤了。第三步，用 await page.aiAssert('页面标题应该包含 "搜索结果"') 来做验证。运行测试，它就会自动执行并生成一份可视化的报告，每一步干了什么一目了然。
Midscene.js的代码本身是开源的，免费。但它的AI大脑需要连接一个大模型才能工作。如果你选择用OpenAI的GPT-4这类云服务，那你就需要自己申请API密钥，并且每次调用都会产生费用，钱是付给OpenAI的。如果你有能力部署UI-TARS这样的开源模型在自己服务器上，那就不需要额外付费了。
这取决于你怎么用。因为你的操作指令和网页内容需要发给AI模型去理解，如果你用的是公有云模型比如GPT-4，这些数据就会经过OpenAI的服务器。如果你对数据安全有严格要求，可以选择私有化部署的方式，也就是在公司内部服务器上部署一个开源的AI模型（比如UI-TARS），让Midscene.js连这个内部的模型，这样所有数据就都在公司内部流转，安全性就高多了。
一个很实用的技巧是，先用它的Chrome插件或者Playground功能，用自然语言试着手动执行一遍你的测试流程。Playground里可以边试边调整你的指令，直到AI能正确执行为止。然后，你再把调试好的这几句自然语言指令复制到你的正式测试脚本里。这样能大大减少反复运行整个测试套件来调试的时间。
特色就是“自然语言断言”和“可视化报告”。以前你要验证一个复杂状态，得写好几行代码去获取元素属性再判断。现在你直接说“断言用户的头像应该显示在页面右上角”，AI就能自己去看。而且它生成的报告非常直观，每一步都有截图和AI的思考过程，调试的时候看报告就知道AI在哪一步理解错了，非常方便。
这正是它的强项。你可以写一句指令，比如 const data = await page.ai('提取页面中所有商品的名称和价格，以JSON数组格式返回')。它就会自动去页面上找，然后返回一个像 [{name: "商品A", price: 99.9}] 这样的数据给你，省去了你自己写选择器去一个个提取的麻烦。
它不能直接生成PPT或视频文件。不过，如果你想自动化在线的PPT制作工具，比如自动登录Canva，创建一个新演示文稿，然后插入特定的图片和文字，那Midscene.js可以胜任。它可以按照你的自然语言指令，在浏览器里完成这一系列操作，从而间接实现PPT的自动化生成。
会的。这个限制主要来自你背后调用的那个AI模型。每个模型一次能处理的文本量是有上限的。如果你的测试步骤描述非常长，或者你想在一条指令里包含极复杂的多步操作，会超出模型的限制。好的实践是把复杂的流程拆分成几条逻辑清晰、相对简短的自然语言指令，这样既方便AI理解，也方便后续维护。
可以的。你可以使用Midscene.js提供的Chrome插件。安装后，你可以在任何网页上打开插件的输入框，用自然语言输入你想操作的事情，比如“把这个页面的配色方案截个图保存下来”，插件就会尝试帮你执行。这对于快速验证产品设计、录制演示流程或者向开发同学复现Bug都非常有用，是一个沟通和验证的好帮手。
| 分享笔记 （共有 篇笔记） |
