别再死磕Selector了！dev-browser用AI视觉定位元素，真香！✨-Skill优仓

还在为浏览器自动化抓狂吗？

兄弟们，是不是都有过这样的经历：为了写一个自动化测试或者爬虫脚本，对着浏览器的开发者工具，一点点抠出那些又长又臭的CSS Selector或XPath，结果前端一改版，整个脚本直接报废，加班到深夜就为了修复这些脆弱的定位符？😭

或者，你好不容易写好一个登录、点击、填表单的超长脚本，结果中间一步出错了，整个流程就得从头再来，调试起来简直想砸电脑！

今天按头安利一个宝藏Skill：dev-browser。它彻底改变了浏览器自动化的游戏规则，用一种极其优雅和智能的方式，把我们从这些重复、繁琐的劳动中解救出来。亲测，用上就回不去了！

核心功能

dev-browser不是一个简单的工具，它是一套全新的浏览器自动化哲学。核心亮点就几个字：状态持久化和AI视觉定位。

持久化页面状态：这是dev-browser的杀手锏。传统的自动化脚本每次运行都是一个全新的、无痕的浏览器环境。但dev-browser不一样，它能让页面状态（比如你的登录Session）在多次脚本执行之间保持不变。这意味着你可以先用一个脚本完成登录，然后悠闲地写下一个脚本去操作登录后的页面，状态完全保留，就像你在手动操作自己的浏览器一样！
增量式脚本执行：告别那些动辄几百行的“巨无霸”脚本。dev-browser鼓励你编写小巧、专注的脚本，每个脚本只做一件事（比如“导航到首页”、“点击登录按钮”、“输入用户名”）。这种小步快跑的模式让调试变得异常简单，哪一步出错了，一目了然，再也不用从头跑到尾。
AI视觉元素定位 (getAISnapshot)：这功能真的绝了！还在研究复杂的Selector？dev-browser直接给你“开天眼”。你只需要调用getAISnapshot()，它就会像人一样“看”懂整个页面，并生成一个清晰的、包含所有可交互元素的“UI地图”（一个YAML格式的无障碍树）。每个元素都会被分配一个简单的引用ID，比如ref=e8。你操作元素时，直接用这个ID就行，完全不用关心它的HTML结构和CSS类名！
双模式运行 (Standalone & Extension)：dev-browser提供了两种模式满足不同需求。独立模式会启动一个全新的Chromium浏览器，适合进行干净的、隔离的自动化测试。而扩展模式则能连接到你当前正在使用的Chrome浏览器，让你直接在你已经登录的网站上（比如公司内网、个人邮箱）执行自动化任务，省去了处理复杂登录验证的麻烦。

适用平台

dev-browser作为一个顶级的Skill，能够完美适配并极大地增强市面上主流的AI编程助手和IDE。你可以把它看作是这些AI助手的“最强外挂”，赋予了它们原本不具备的、与真实浏览器世界交互的能力。

它与以下平台无缝协作，显著提升AI在处理Web任务时的上下文理解和执行能力：

Cursor
GitHub Copilot
Claude Code
OpenAI Codex
Gemini Code Assist
文心快码
腾讯云 CodeBuddy
华为云 CodeArts

当你的AI助手拥有了dev-browser，就等于拥有了一双能“看见”并“操作”网页的手，帮你完成从数据抓取到自动化测试的各种复杂任务。

实操代码示例

光说不练假把式。我们来看一个极简的例子，感受一下dev-browser的优雅。假设我们要打开Hacker News，并点击“new”链接。

第一步：启动并导航到页面

我们先写一个脚本，连接到dev-browser服务，并打开一个名为’hackernews’的页面。

import { connect, waitForPageLoad } from '@/client.js';

const client = await connect();
const page = await client.page('hackernews');

await page.goto('https://news.ycombinator.com/');
await waitForPageLoad(page);

console.log('成功打开页面:', await page.title());
await client.disconnect();

第二步：使用AI快照“看”懂页面

页面打开了，但我们不知道“new”链接的Selector是什么。没关系，让AI来！

import { connect } from '@/client.js';

const client = await connect();
// 获取名为'hackernews'的页面的AI快照
const snapshot = await client.getAISnapshot('hackernews');
console.log(snapshot); // 打印出页面的“UI地图”
await client.disconnect();

你会得到类似下面这样的YAML输出，清晰明了：

- banner:
  - link 'Hacker News' [ref=e1]
  - navigation:
    - link 'new' [ref=e2]
    - link 'past' [ref=e3]
# ... more content ...

看到了吗？“new”链接的引用ID是e2。太简单了！

第三步：使用引用ID进行交互

现在，我们用这个e2来点击链接。

import { connect, waitForPageLoad } from '@/client.js';

const client = await connect();
// 通过引用ID 'e2' 获取元素
const newLink = await client.selectSnapshotRef('hackernews', 'e2');
await newLink.click();

// 等待新页面加载完成
const page = await client.page('hackernews');
await waitForPageLoad(page);

console.log('点击后跳转到了:', page.url());
await client.disconnect();

三步走，没有一个复杂的Selector，逻辑清晰，维护简单。这就是dev-browser的魅力！

优势分析

告别脆弱的Selector：相比于传统依赖CSS或XPath的定位方式，dev-browser基于无障碍树（Accessibility Tree）的AI快照更加稳定。UI的小幅调整（比如改个类名）完全不影响脚本，因为它是根据元素的“角色”（如链接、按钮）来识别的。
调试体验革命：由于页面状态持久化，任何一步脚本失败后，浏览器都停留在失败的那个瞬间。你可以从容地截个图、看看URL、获取页面源码，定位问题。然后写一个新的小脚本从失败点继续，而不是推倒重来。
无缝集成现有会话：扩展模式是真正的生产力神器。想象一下，直接在你已经登录了公司Jira的浏览器上运行一个脚本，自动帮你创建每日报告，这得省下多少时间！

应用场景

Web应用自动化测试：模拟真实用户的完整操作路径，如注册、登录、浏览商品、加入购物车、支付。每个步骤都是一个独立脚本，测试流程清晰可控。
网页数据抓取：轻松应对需要登录、点击“加载更多”、处理分页等复杂交互的网站。甚至可以通过拦截网络请求的方式，高效抓取由API动态加载的数据。
自动化日常工作流：自动填写在线表单、定时检查网站信息更新、从内网系统下载报表……所有在浏览器里的重复性操作，都可以交给dev-browser。
网站健康巡检：编写一个巡检脚本，定时访问网站的关键页面，并进行截图。通过对比截图或检查关键元素是否存在，实现网站可用性的自动化监控。

最佳实践

有意义的页面命名：给你的页面起个好名字，比如client.page('login-page')而不是client.page('p1')。这样在管理多个页面时，逻辑会更清晰。
小步快跑，频繁验证：每执行一个动作后，都通过console.log(page.url())或page.screenshot()来验证操作是否符合预期，确保工作流的健壮性。
善用等待机制：现代网页大量使用异步加载。请务必在导航或点击操作后使用waitForPageLoad、page.waitForSelector等函数，等待页面或元素加载完成，避免脚本出错。
及时清理资源：虽然页面状态可以持久化，但当一个完整的任务流结束后，建议使用client.close('page-name')关闭不再需要的页面，以释放服务器资源。

管理和发现像dev-browser这样强大的Skills，需要一个专业的平台。将这些零散的脚本和工作流沉淀下来，形成可复用的资产，是提升团队效率的关键。这时候，Skill优仓就派上用场了。它是一个汇聚全球优质Skill的仓库，你不仅可以在这里找到并免费使用像dev-browser这样的神仙工具，还能将你自己的自动化工作流上传，与社区分享，或者在团队内部复用。现在就去Skill优仓探索更多能让你早下班的宝藏Skills吧！