再见，脆弱的选择器！AI 视觉测试框架 Magnitude 入门指南

内容分享3小时前发布 Daisy天生不对

0 0 0

全能 AI 聚合平台免费

一站式接入主流 AI 大模型，支持对话 · 生图 · 生视频，即开即用

ChatGPT Claude Gemini Grok DeepSeek 通义千问 Ollama

AI对话 AI生图 AI视频

免费使用 →

标签：#软件测试 #AI测试 #Magnitude #自动化测试 #浏览器测试 #测试框架

你有没有遇到过这种崩溃时刻：

自动化测试脚本好好的，前端同学改了个按钮的 class 名，测试就全挂了。

花了一上午写的 XPath 选择器，第二天 UI 稍微调整了一下布局，一个个重新定位。

这不是你写得不好——这是传统自动化测试的结构性缺陷。

今天推荐一个彻底解决这个问题的工具：Magnitude。

️ 工具信息

项目	内容
工具名称	Magnitude（browser-agent）
项目地址	https://gitcode.com/gh_mirrors/magnit/browser-agent
类型	AI 驱动的开源浏览器测试框架
核心理念	Vision-First（视觉优先）
适用场景	Web 端自动化测试
入门门槛	低，支持自然语言描述元素

Magnitude 是怎么工作的？

传统测试工具（Selenium、Playwright）都是基于 DOM 结构来定位元素的——你告知它”找 id 是 submit-btn 的这个元素”，它就去找。问题是，一旦前端改了 id 或者重构了组件，这条指令就失效了。

Magnitude 的做法完全不一样：它用计算机视觉技术，让 AI 像人一样看页面——不管你把按钮放在哪、叫什么名字，只要页面上能看到”提交按钮”，它就能找到并点击。

用自然语言写测试，就这么简单：

// 传统写法（XPath，脆弱）
await page.click('#submit-btn');

// Magnitude 写法（自然语言，稳健）
await page.click('提交按钮');
await page.fill('用户名输入框', 'test@example.com');
await page.click('登录按钮');

两段代码做的事一样，但 Magnitude 的写法，就算前端把按钮的 id 改成 btn-submit、换个位置、换个颜色，测试依然能跑过。

核心优势拆解

① 抗干扰能力强
页面结构变化不影响测试稳定性。视觉识别不依赖 DOM，改了 class、id、层级都不怕。

② 自然语言定位元素
“用户名输入框”、”登录按钮”、”确认弹窗”——用中文就能写测试，降低沟通成本，产品经理都能看懂你的测试用例。

③ 可视化执行过程
测试运行时会打开可视化界面，实时展示 AI 如何识别和交互页面元素，Debugging 直观许多。

④ 零代码入门
API 设计极简，5 分钟就能写出第一个测试用例。

快速上手

Step 1：安装 Bun 运行时（比 Node.js 快 3-5 倍，强烈推荐）

# macOS/Linux
curl -fsSL https://bun.sh/install | bash

# Windows
powershell -c "irm bun.sh/install.ps1 | iex"

Step 2：克隆并构建项目

git clone https://gitcode.com/gh_mirrors/magnit/browser-agent
cd browser-agent
bun install && bun run build

Step 3：写你的第一个测试

import { test, expect } from 'magnitude-test';

test('登录流程测试', async ({ page }) => {
  await page.goto('https://your-app.com');
  
  await page.fill('用户名输入框', 'test@example.com');
  await page.fill('密码输入框', '123456');
  await page.click('登录按钮');
  
  expect(await page.isVisible('欢迎回来')).toBe(true);
});