chrome插件中如何使用midscene.js

Midscene.js:重新定义UI自动化的新时代工具 Midscene.js是创新的UI自动化解决方案,通过AI简化脚本编写与维护,提供交互、提取、断言三种方法,支持LLM和UI-TARS模型,可从Chrome商店下载或GitHub获取源码,使用需配置OPENAI_API_KEY等。 阅读详情
AI摘要

本文介绍在Chrome插件中使用Midscene.js的方法。先提及可参考之前文章进行本地环境准备,接着说明在Chrome浏览器集成Midscene.js的操作,添加完成后可看到插件。还阐述了配置大模型时需设置环境变量信息,最后给出实现功能的用例及执行结果。

环境准备

在上一篇文章中说了本地环境如何准备,大家可以参考阿里百炼注册和本地环境配置-优快云博客

集成 Midscene.js 到 Chrome 插件
  • 在chrome浏览器中打开chrome://extensions/
  • 点击在 Chrome 应用商店 中发现更多扩展程序和主题
  • 输入 Midscence.js,添加即可
  • 添加完成后就可以看到添加的插件
配置大模型

打开midscene.js,点击弹框右上角的设置

在环境变量弹框中设置自己的环境变量信息,根据不同的大模型设置的参数也不同,具体模型和对应的参数可以参考官网选择 AI 模型 - (AI UI Automation, AI Testing, Computer Use, Browser Use, Android Use)

OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
OPENAI_API_KEY="......"
MIDSCENE_MODEL_NAME="qwen-vl-max-latest"
MIDSCENE_USE_QWEN_VL=1

实现功能示例

配置完成后我们就可以开始写用例去运行了

写用例的内容就和我们日常写的手工执行用例一样就行

我写的用例内容:

输入账号:adminxxxx
密码:axxxx5
验证码:请你根据验证码图片自动识别后输入
最后点击登录
等待10秒完成登录

执行结果

手把手教你:在Windows上离线安装Midscene.js Chrome插件(附压缩包) 本文详细介绍了在Windows系统上离线安装Midscene.js Chrome插件的完整流程,包括获取插件资源包、分步安装指南、高级配置技巧及疑难问题排查。通过离线安装方式,用户无需依赖网络环境即可完成插件部署,特别适合无法访问Chrome应用商店的场景。 阅读详情

相关推荐

手把手教你:在Windows上离线安装Midscene.js Chrome插件(附阿里云通义千问API配置)

本文详细指导如何在Windows系统上离线安装Midscene.js Chrome插件,并配置阿里云通义千问API。从环境检查、插件加载到API密钥设置,提供完整教程和常见问题解决方案,帮助开发者绕过网络限制快速部署这一AI辅助工具。

weixin_33704234的博客 594

目前可以落地的AI自动化项目

Midscene.js是一个AI驱动的自动化测试SDK,支持自然语言控制页面交互、数据提取和断言。它通过多模态大语言模型理解UI界面,提供三种核心方法:.ai(交互)、.aiQuery(数据提取)和.aiAssert(断言)。推荐与Playwright集成使用,项目playwright-mind提供了开箱即用的解决方案,支持免费的通义千问VL模型。使用示例展示了如何实现Bing搜索自动化测试,包含搜索、结果提取和断言全流程。该方案相比纯代码方式更智能,相比YAML方式更灵活强大,适合落地AI自动化测试项目。

nhb687096的博客 981

手把手教你用阿里云通义千问API配置Midscene.js Chrome插件(Windows保姆级教程)

本文提供了一份详细的Windows平台教程,指导用户如何配置阿里云通义千问API以使用Midscene.js Chrome插件。从环境准备、API密钥申请到插件安装与调试,涵盖了完整的配置流程,特别针对无法访问Chrome应用商店的情况提供了离线解决方案。

weixin_26908317的博客 554

使用 Midscene.js 获取 APP 页面数据构建 AI 知识库

本文介绍如何使用Midscene.js实现自动化提取APP页面数据,通过AI视觉理解能力将截图转换为结构化Markdown文档。Midscene.js是一个支持多平台的视觉驱动UI自动化框架,无需解析DOM树,仅需截图即可让AI理解界面。文章详细说明了环境配置步骤(安装Node.js、ADB、配置模型API等),并提供了核心实现代码,功能包括连接设备、获取页面Activity、截图、AI提取页面结构和交互元素、生成Markdown文档等。该方法相比传统解析View Hierarchy的方式更简便高效.

u013255691的专栏 555

Midscene.js插件配置与模型接入实战指南

本文详细介绍了Midscene.js插件的安装配置与阿里云通义千问模型的接入方法,包括Windows和Ubuntu环境下的特殊设置。通过实战案例展示如何利用该Chrome插件实现网页自动化测试,解决常见问题如API调用、网络连接等,帮助开发者高效集成AI能力到浏览器自动化流程中。

weixin_29291185的博客 427

Midscene.js(1):Chrome 插件实战之基于 AI 驱动 WEB UI 自动化测试「喂饭教程」

Midscene.js 是一款开源的AI驱动UI自动化工具,支持自然语言交互、数据提取、断言验证等多种功能。自然语言交互。本文将以 Midscene.js Chrome 插件为例,带你从零上手,体验如何用最简单的方式实现高效、智能的UI自动化测试。

blues_C的博客 4404

Midscene.js 实战:用自然语言5分钟搞定网页自动化测试(附Chrome插件配置指南)

本文介绍了如何利用Midscene.js这一AI驱动的UI自动化工具,通过自然语言指令快速完成网页自动化测试。文章提供了详细的Chrome插件配置指南,并演示了电商价格监控和表单填写等实战场景,展示了其如何降低自动化门槛并提升效率。

weixin_29271263的博客 560

如何做界面自动化工具选择?

综上各因素比较,具备一定编程能力的测试团队更适合选择Selenium WebDriver作为团队的主要 Web自动化测试工具,对于预算比较充足且团队成员能力编程一般的测试团队更适合选择QTP工作作为团队的主要Web自动化测试工具。在2025年的技术环境中,UI自动化测试工具的选择需综合考虑工具的功能特性、适用场景、维护成本以及与团队技术栈的匹配度。Selenium:支持主要的组件,但是某些事件、方法和对象属性的支持不够。QTP:良好的支持,提供对.NET组件的支持。QTP:做了很好的支持,支持录制添加。

hellen_cuicui的博客 1480

Midscene.js Chrome 插件使用

用ai实现UI自动化已成为新的趋势,与传统的UI自动化对比,Midscene.js 是一个创新的、面向开发者的 UI 自动化解决方案,并通过人工智能技术简化自动化脚本的编写与维护。它提供了三种核心方法——交互(.ai, .aiAction)、提取(.aiQuery)和断言(.aiAssert),使开发者能够以自然语言描述步骤并执行复杂的UI操作。它不仅支持通用的大规模语言模型(LLM),还兼容开源模型 UI-TARS,为用户提供了更多的选择。

FQY107的博客 3322

Midscene.js(2):代码集成 + 桥接模式(Bridge Mode)的使用「喂饭教程」

本文将手把手教你从零开始搭建一个 Node.js 项目,集成 Midscene.js,并利用其桥接模式实现对 Chrome 浏览器的自动化操作。我们将通过具体的实例,来展示 Midscene.js 的便捷性与 AI 能力的结合。

blues_C的博客 1844

Midscene.js:用自然语言驱动的Web自动化Chrome插件实战指南

Web自动化测试长期受困于元素定位与动态内容处理,选择器随页面结构变化频繁失效。随着大模型技术的成熟,自然语言交互为UI自动化提供了全新路径:AI理解页面结构,用户仅需描述目标,即可驱动浏览器完成点击、输入、断言等操作。这种模式不仅降低了脚本维护成本,也让非技术人员能够参与自动化流程设计。Chrome插件作为浏览器端的轻量形态,成为探索AI自动化最便捷的入口。Midscene.js正是这样一款工具,它结合多模态大模型,将自然语言指令转化为真实浏览器操作,支持录制回放、AI断言与结果验证,适用于回归测试、表单

weixin_28826545的博客 286

Midscene.js 体验:用 LLM 驱动 UI 自动化测试的 Chrome 插件与 MCP server 实践

Midscene.js 用 LLM 驱动 UI 自动化测试,Chrome 插件与 MCP server 让自然语言指令直接操作页面。本文从 TaoToken 配置 OPENAI_BASE_URL 与 API Key 入手,给出插件、MCP、SDK 三处可复制配置,并排查 401、local proxy failed、reading choices 等常见报错,帮助前端与测试团队降低选择器维护成本。详见 https://taotoken.net/?utm_source=taotoken_aicg_blog_e

weixin_42588877的博客 19

Midscene.js Chrome插件:用自然语言驱动UI自动化,告别脆弱选择器

UI自动化测试中,选择器维护一直是高成本难题,前端轻微改动就可能导致脚本失效。Midscene.js通过AI视觉理解能力,将传统“指令驱动”的自动化提升为“意图驱动”模式。用户只需用自然语言描述操作目标,AI便能自主分析页面结构、规划执行步骤,完成点击、输入、数据提取与断言等任务。其Chrome插件形态贴近真实操作现场,复用当前登录态,支持实时可视反馈,适合探索调试与快速验证;而SDK则面向工程化集成,实现从一次性操作到可持续回归的转换。本文从原理、环境配置、指令编写、数据提取到常见问题排查,系统介绍了这一

weixin_32228501的博客 243

[测试技术] AI驱动零代码UI自动化测试-Midscene.js实操

UI自动化领域长期受困于“定位元素-编写指令-调试适配”的繁琐流程,CSS选择器、XPath定位易因页面微调失效,维护成本高。Midscene.js以“Joyful Automation by AI”为核心,是AI视觉语言模型驱动的全平台UI自动化SDK,核心优势是让开发者用自然语言就能操控界面。Midscene.js核心是“视觉驱动全平台自动化工具”,不依赖DOM解析,通过截图识别UI元素、完成交互。覆盖Web、Android、iOS及自定义界面,彻底解决传统自动化跨平台适配难、定位不稳定的痛点。

weixin_42390585的博客 695

Chrome插件集成Midscene.js[项目源码]

本文详细介绍了如何在Chrome插件中集成和使用Midscene.js。首先,需要准备本地环境,可以参考之前的博客文章。接着,在Chrome浏览器中打开扩展程序页面,搜索并添加Midscene.js插件。配置大模型时,需在midscene.js中设置环境变量,包括OPENAI_BASE_URL、OPENAI_API_KEY等参数,具体参数根据所选模型而定。配置完成后,可以开始编写用例并执行,用例内容与手工执行用例类似。文章还提供了一个示例用例,包括输入账号、密码、验证码等操作,并展示了执行结果。

从PHY芯片看工业网络精准时钟:IEEE 1588v2(PTP)协议实现与选型指南

本文深入解析了工业网络中IEEE 1588v2(PTP)协议的实现与PHY芯片选型要点。通过对比KG7101、RTL8211F等芯片的关键参数,揭示硬件时间戳对纳秒级时钟同步的决定性作用,并提供PTP网络设计中的拓扑布局与配置优化技巧,助力工业自动化场景实现精准时间同步。

weixin_42628688的博客 500

Midscene.js框架(0):零基础学习UI自动化测试

摘要: Midscene.js是一款基于多模态大模型的视觉驱动UI自动化工具,通过自然语言指令操作界面,摆脱对DOM结构的依赖。支持Web、移动端及桌面应用,提供Chrome插件(零代码)和JavaScript SDK两种集成方式,兼容GPT-4o、Qwen等主流模型。核心功能包括自动规划(如aiAct执行任务)、数据提取(aiQuery)和视觉断言(aiAssert)。用户仅需配置模型API即可快速实践,适用于跨平台自动化测试,尤其擅长处理动态UI、无结构元素(如图标、Canvas)及跨域场景。优势在于自

kuangwenting的博客 589

避坑指南:你的VASP CI-NEB计算为什么不收敛?常见错误分析与解决思路

本文深入解析VASP CI-NEB计算不收敛的常见问题,提供从结构准备到参数设置的系统解决方案。针对过渡态计算中的能量曲线异常、中间图像偏离等典型问题,详细介绍了诊断方法和实用工具,帮助研究者高效解决CI-NEB收敛难题,提升计算效率。

weixin_29698641的博客 430

Midscene.js 谷歌浏览器插件使用指南

Midscene.js 谷歌浏览器插件使用指南

aovenus的专栏-测试新时代(微信公众号:测试新时代) 913

51单片机STC8G1K08驱动ws2812记录

使用51单片机控制17个2812灯,这里选择STC8芯片,最大频率可以达到35M,参考网上的各种文章案例,使用定时器做的时候实测做不到规格书要求的245-345ns,STC8G1K08不带PWM,所以只能使用nop来做,好在单片机在这里只有做编程灯的功能,省略测试过程,下面是程序,使用的是24MHz内部晶振 //设置一个灯珠 void SendOnePix(unsigned char *ptr) { unsigned char i,j; unsigned char temp; fo...

的博客 7318

图像质量评估(9) -- 杂散光(Flare)的测量标准与实战解析

本文深入解析了杂散光(Flare)对图像质量的影响及其测量标准,包括ISO 9358和ISO 18844的核心方法。通过实战指南和优化策略,帮助读者掌握杂散光的测量与控制技术,提升光学系统性能。

sql99的博客 250

一句话生成 UI 自动化脚本!Midscene.js 让测试“零编码”成为可能

提到Midscene.js,是不是很多小伙伴很陌生,它就仅仅是一个自动化 工具么?它的神奇之处是什么?别着急,跟着我的思路,咱逐层揭开Midscene.js的面纱。Midscene.js 是由字节跳动 Web Infra 团队开源的一款基于 AI 的 UI 自动化工具,支持通过自然语言描述实现对网页、移动端、自动化测试和脚本编写等操作。

2401_83014899的博客 509

华为Atlas 300I推理卡驱动安装全攻略:从环境检查到常见问题解决

本文提供了华为Atlas 300I推理卡驱动安装的完整实战指南。从安装前的系统环境检查、内核版本匹配,到详细的二进制.run文件安装步骤、源码编译及高级定制化部署,涵盖了驱动安装的全流程。文章重点解析了安装过程中的关键决策、常见问题排查与解决方案,并针对生产环境的多卡配置、性能调优及安全加固给出了专业建议,旨在帮助用户高效、稳定地完成AI推理加速卡的部署。

swift5iosmith的博客 627
上一篇: 阿里百炼注册和本地环境配置
下一篇: 本地如何安装midscene.js运行环境
wjcaolinghua
博客等级 码龄15年 192粉丝 87原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值