ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">字节有一个很实用但不怎么火的项目，叫 Midscene.js，Chrome 商店上的安装数仅有 1 万，它是一个由多模态模型驱动的前端自动化测试插件。自动化测试我平常很少用到，但我发现它特别适合用来写爬虫……ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">Midscene.js 一共就三大 API：Action、Query、AssertingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;padding-left: 8px;color: rgb(63, 63, 63);">Action 交互ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">描述步骤并执行交互。例如，在 GitHub 上交互：查找 GitHub 上的 Twikoo 项目，点进详情页，点个 Star——ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;color: rgb(63, 63, 63);">![]() ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;margin: 0.1em auto 0.5em;border-radius: 4px;height: auto !important;" title="null" src="https://api.ibos.cn/v4/weapparticle/accesswximg?aid=106163&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy94eFRnUllSQ3FRQ29kNkVqcURVWU9RV0lJQUdiV21OZkFxdEtTT0IwM1h1QjJjWkllaWJER1hpYkVYNFo1bEY0anF2b0lvS1RDQk5sQzd2Q0pLYmhHTHZRLzY0MD93eF9mbXQ9b3RoZXImYW1w;from=appmsg"/>ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;padding-left: 8px;color: rgb(63, 63, 63);">Query 提取ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;letter-spacing: 0.1em;color: rgb(63, 63, 63);">从 UI 中“理解”并提取数据，返回值是 JSON 格式，想要什么数据结构，它都可以给你。例如，在面试题宝典网站上提取：string[]，所有面试题目——ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;color: rgb(63, 63, 63);">![]() ingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 14px;margin: 0.1em auto 0.5em;border-radius: 4px;height: auto !important;" title="null" src="https://api.ibos.cn/v4/weapparticle/accesswximg?aid=106163&url=aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy94eFRnUllSQ3FRQ29kNkVqcURVWU9RV0lJQUdiV21OZkFENEUwV0kxajJkTXZHSHFYSzlnSFNsNHJtTUsyeWc3cHpaMUs4cTBwR3hoeExYWW1lVFZ4Zy82NDA/d3hfZm10PW90aGVyJmFtcA==;from=appmsg"/>Assert 断言判断是否符合指定条件。例如，在智能家庭页面断言：电脑是关着的——  大模型支持情况项目最初仅支持 GPT-4o 模型，跑一行用例的成本在 ¥0.1 左右，还挺贵的，后来支持了 Qwen-2.5-VL 和 UI-TARS，成本就大幅降低了。以下就以千问模型为例，带领大家上手这个神奇的插件。 安装可以直接从 Chrome 商店安装：
https://chromewebstore.google.com/detail/midscene/gbldofcpkknbggpkmbdaefngejllnief 配置从浏览器右上角的插件菜单中打开 Midscene.js 的侧边栏，会提示 No config，点击按钮会弹出 Env Config 的设置框，在里面配置以下变量 OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
MIDSCENE_MODEL_NAME="qwen-vl-max-latest"
MIDSCENE_USE_QWEN_VL=1
其中的OPENAI_API_KEY需要你自己申请，申请的地址是：
https://bailian.console.aliyun.com/?apiKey=1#/api-key 以上链接不包含推广，如果你是首次开通阿里云百炼，新用户是有免费额度的，请注意额度的有效期，避免浪费~ 测试接下来用自然语言随便写一条指令，点击 Run 按钮，见证 AI 开始接管你的浏览器…… 代码集成接下来我们尝试编写爬虫，组合这三大 API，完成复杂的自动化任务。 建一个新的 Node.js 项目，安装所需的依赖—— pnpminstall@midscene/webtsx--save-dev 编写脚本main.ts，执行你想要进行的操作，例如，打开必应，输入 iMaeGoo 点击搜索，并输出搜索结果—— import{AgentOverChromeBridge}from"@midscene/web/bridge-mode";
functionsleep(ms:number) {
returnnewPromise((r) =>setTimeout(r, ms));
}
asyncfunctionmain() {
process.env.OPENAI_BASE_URL=
"https://dashscope.aliyuncs.com/compatible-mode/v1";
process.env.OPENAI_API_KEY="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
process.env.MIDSCENE_MODEL_NAME="qwen-vl-max-latest";
process.env.MIDSCENE_USE_QWEN_VL=1;
constagent =newAgentOverChromeBridge();
// 这个方法将连接到你的桌面 Chrome 的新标签页
// 记得启动你的 Chrome 插件，并点击 'allow connection' 按钮。否则你会得到一个 timeout 错误
awaitagent.connectNewTabWithUrl("https://www.bing.com");
// 这些方法与普通 Midscene agent 相同
awaitagent.ai("输入 iMaeGoo 点击搜索");
constresult =awaitagent.aiQuery(
"{title: string, url: string}[], 搜索结果"
);
console.log("搜索结果", result);
awaitsleep(3000);
awaitagent.destroy();
}
main();
启动你的 Chrome 插件，点击 Bridge Mode，再点击 'Allow connection' 按钮—
|
