Magnitude：强！一款基于 AI 视觉的 Web 自动化框架-程序员充电站

你是否还在为脆弱的 Web 自动化测试而烦恼？XPath 变更、CSS 选择器失效、DOM 结构调整，这些问题是不是经常让你的自动化脚本功亏一篑？今天要给大家介绍的Magnitude，可能会彻底改变你对 Web 自动化的认知。

大多数浏览器自动化工具（如Selenium、Playwright）依赖于DOM结构来定位元素。但现代网站的DOM结构越来越复杂，稍一变动脚本就会失效。

概括起来，传统的 Web 自动化工具（如 Selenium、Playwright）会存在两大痛点：

依赖 DOM 结构：一旦页面元素的属性或层级发生变化，脚本就会失效
指令僵化：只能执行固定流程，遇到意外情况无法自主调整

而 Magnitude 凭借两大创新彻底解决了这些问题：

视觉优先架构：通过多模态大模型直接分析页面截图，基于像素坐标执行操作，完全不依赖 DOM 结构
可控且可重复的自动化：支持从精细操作到复杂流程的不同抽象级别，结合自定义提示词，既灵活又可预测。

什么是 Magnitude？

Magnitude 是一款基于AI视觉的 Web 自动化框架，它彻底摆脱了传统自动化工具对 DOM 结构的依赖，通过模拟人类视觉和交互方式来操控浏览器。简单来说，它不是通过查找元素的 ID 或类名来操作页面，而是像人一样 "看到" 界面并做出反应。

Magnitude的革命性在于：它不依赖DOM，而是直接“看”屏幕！就像人类通过视觉识别按钮、输入框一样，它通过像素坐标来定位和操作元素。

💡这意味着：无论网站如何重构，只要视觉元素存在，Magnitude就能找到它，大大提高了自动化的鲁棒性和通用性

这个框架另外的一个厉害之处在于，它在 WebVoyager 评测中获得了 94% 的高分，这意味着它在处理各种复杂 Web 任务时具有接近人类的能力。

核心功能

Magnitude 提供了四大核心能力，覆盖 Web 自动化的全场景需求：

智能导航（Navigate）：理解任何网页界面，并规划操作操作路径
精准交互（Interact）：通过鼠标和键盘执行精确操作
数据提取（Extract）：智能提取结构化数据
结果验证（Verify）：内置测试运行器，支持强大的视觉断言

你可以用它来：

自动化Web任务
在无API的应用之间进行集成
提取数据
测试Web应用
作为自定义浏览器代理的构建块

适用场景

Magnitude 适合多种场景：

前端自动化测试，尤其适合频繁迭代的项目
跨应用数据同步和工作流自动化
网页数据提取和分析
构建自定义浏览器代理
辅助开发人员进行重复性操作

快速上手

想要体验 Magnitude 非常简单，有两种方式可以快速开始：

方式一：创建自动化项目

npx create-magnitude-app

这条命令会创建一个新的项目，并引导你完成 Magnitude 的设置，还会生成一个可以立即运行的示例脚本！

方式二：在现有项目中使用测试运行器

npm i --save-dev magnitude-test && npx magnitude init

初始化后会生成：

magnitude.config.ts：配置文件
example.mag.ts：示例测试文件

Magnitude 的 API 设计非常直观，支持从高层任务到底层操作的各种需求：

# 处理高层任务 await agent.act('创建一个任务', { data: { title: '使用 Magnitude', description: '运行 "npx create-magnitude-app" 并跟随指示', }, }); # 也能处理底层操作 await agent.act('将"使用 Magnitude"拖拽到"进行中"列的顶部'); # 智能提取数据 const tasks = await agent.extract( '列出进行中的任务', z.array(z.object({ title: z.string(), description: z.string(), difficulty: z.number().describe('难度评级 1-5') })), );

AI会理解你的意图，并自动分解为一系列精确的鼠标和键盘操作。测试用例也可以用自然语言编写，无需复杂的选择器：

test('使用有效凭据登录', { url: "https://qa-bench.com" }) .step('登录应用') .data({ username: "test-user@magnitude.run" }) .secureData({ password: "test" }) .check('能看到仪表盘') .step('创建新公司') .data("前两个值随意，其余用默认") .check("公司添加成功");

如图所示：