Midscene.js 体验（1）
一 准备 LLM 接入信息
火山引擎豆包为例，参考https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey?apikey=%7B%7D 申请 api_key。再参考
https://www.volcengine.com/docs/82379/1099522 创建推理接入点

记录模型接入点的 ID。
当前目录下创建.env 文件，内容形如：

或使用阿里云的 OpenAI 兼容接入点 OK

OPENAI_API_KEY="sk-XXXXXX"
OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
MIDSCENE_MODEL_NAME="qwen-vl-max-latest"
MIDSCENE_USE_QWEN_VL=1
或者
#OPENAI_BASE_URL="https://ark.cn-beijing.volces.com/api/v3"
#OPENAI_API_KEY="XXXXX"
#MIDSCENE_MODEL_NAME="ep-2025XXXXXX " # 火山引擎的推理接入点 ID，#doubao-1-5-ui-tars-250428
#MIDSCENE_USE_VLM_UI_TARS=DOUBAO

可参考
https://github.com/web-infra-dev/midscene-example/tree/main/connectivity-test 测试连通性。特别注意的是，windowns 下环境变量 OPENAI_API_KEY 等的设置是否被覆盖。 Npm test

二 Chrome 插件
参考 https://midscenejs.com/zh/quick-experience.html
打开 https://chromewebstore.google.com/detail/midscenejs/gbldofcpkknbggpkmbdaefngejllnief 添加插件到 chrome 浏览器

插件有 2 种模式：

Playground 和 bridge 模式。Playground 使用自然语言指令去指引 web/android 操作；Bridge 通过 sdk 控制浏览器在本地运行；

点击右上角的属性按钮，输入环境变量

OPENAI_BASE_URL="https://ark.cn-beijing.volces.com/api/v3"
OPENAI_API_KEY="your API_KEY"
MIDSCENE_MODEL_NAME="ep-202507131XXXXX" # 火山引擎的推理接入点 ID, #doubao-1-5-ui-tars-250428
MIDSCENE_USE_VLM_UI_TARS=DOUBAO

Playground 模式下，在 “action” tab 的输入框填写完整中文指引词:” 搜索框输入 midscene.js，点击搜索按钮，查询结果页面上包含 midscene.js”，运行结果如后

LLM 处理过程清晰展现。
三 MCP server
1、 Midscene.js 插件， 打开 bridge 模式，点击 Allow connect。
2、 字节 Trae 设置 mcp server： 增加一个 mcp server 然后新增一个智能体。

{
"mcpServers": {
"mcp-midscene": {
"command": "npx",
"args": [
"-y",
"@midscene/mcp"
],
"env": {
"MIDSCENE_MODEL_NAME": "ep-2XXXXX-gvgq6",
"OPENAI_API_KEY": "your key",
"OPENAI_BASE_URL": "https://ark.cn-beijing.volces.com/api/v3",
"MIDSCENE_USE_VLM_UI_TARS": "DOUBAO",
"MCP_SERVER_REQUEST_TIMEOUT": "800000"
}
}
}
}

3、增加一个自定义模型，引入字节的模型

3、 运行结果

报告文件内容

四 集成 playwright

设置好 .env 文件。
npm install @midscene/web --save-dev
npm install playwright
npx playwright test ./e2e/ebay-search.spec.ts

五 yaml 格式
当前目录下设置好.env 文件。

Baidu.yaml 内容
web:
url: https://www.baidu.com

tasks:

• name: 搜索天气
  flow:

  • ai: 搜索 "今日天气"
  • sleep: 3000

• name: 检查结果
  flow:

  • aiAssert: 结果中展示了天气信息

可以 npx midscene Baidu.yaml 或者 midscene Baidu.yaml 运行。

六 更多
加 v: liangjianzhao2020 加入高质量测试效能群。