5分钟快速体验Midscene.js（Node环境、Playwright）

5分钟快速体验Midscene.js

什么是Midscene.js

什么是Midscene.js

Midscene.js 是一款 AI 驱动的 UI 自动化工具，核心定位是通过人工智能简化网页 / UI 交互、数据提取与结果验证的流程，让开发者无需复杂编码即可实现自动化操作，同时支持灵活集成与高效调试，适用于网页自动化测试、数据爬取、重复操作脚本编写等场景。

环境准备

bash 复制代码

mkdir demos-for-midsence.js && cd demos-for-midsence.js

本次通过集成Playwright方式体验，安装依赖

bash 复制代码

# 想用哪个用哪个
npm install @midscene/web playwright @playwright/test dotenv tsx --save-dev
pnpm add @midscene/web playwright @playwright/test dotenv tsx --save-dev
yarn add @midscene/web playwright @playwright/test dotenv tsx --save-dev

编写demo

引用 dotenv 库配置环境变量
Midscene.js会调用模型，所以需要从环境变量读取模型信息。由于Midscene.js是视觉模型驱动的，所以需要配置视觉模型，本示例使用阿里百炼的qwen2.5-vl。已在上一步依赖安装时引入了dotenv，现在在项目的根目录下创建一个.env文件，并配置以下内容：

bash 复制代码

# .env
MIDSCENE_MODEL_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
MIDSCENE_MODEL_API_KEY="你的APIKEY"
MIDSCENE_MODEL_NAME="qwen-vl-max-latest"
MIDSCENE_MODEL_FAMILY="qwen2.5-vl"

编写脚本
在项目根目录下创建一个demo.ts

typescript 复制代码

import { chromium } from 'playwright';
import { PlaywrightAgent } from '@midscene/web/playwright';
import 'dotenv/config';

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));

Promise.resolve(
  (async () => {
    const browser = await chromium.launch({
      headless: true, 
      args: ['--no-sandbox', '--disable-setuid-sandbox'],
    });

    const page = await browser.newPage();
    await page.setViewportSize({
      width: 1280,
      height: 768,
    });
    await page.goto('https://www.bilibili.com');
    await sleep(1000);
    const agent = new PlaywrightAgent(page);

    await agent.aiAct('搜索框输入 "欧洲十大最佳旅行目的地", 回车');

    await agent.aiWaitFor('页面上至少1个搜索结果');

    const items = await agent.aiQuery(
      '{itemTitle: string, author: string}[], 在搜索结果的第一页中查找标题及其对应的作者',
    );
    console.log('输出结果', items);
    await browser.close();
  })(),
);

运行

bash 复制代码

npx tsx demo.ts

运行完成后项目目录下生成midscene_run文件夹，报告则位于midscene_run/report下的html