字节最新开源AI自动生成UI测试脚本

Midscene.js 核心API

• .aiAction(steps: string)：描述你要执行的一系列操作步骤。例如：.aiAction("搜索栏输入 '今天天气怎么样'，点击搜索按钮")。一步到位，无需编写复杂选择器。
• .ai()：是.aiAction的简写，进一步减少输入量。
• .aiQuery(dataShape: any)：从页面提取指定数据。例如：.aiQuery('左上角展示的日期和时间，string')。无需编写繁琐的DOM遍历，用自然语言即可搞定。
• .aiAssert(assertion: string, errorMsg?: string)：断言功能，用于判断当前页面状态是否符合预期。

Chrome插件快速体验

与Puppeteer集成

OPENAI_API_KEY="替换为自己的Open API Key"

npm install @midscene/web puppeteer ts-node --sa ve-dev

import puppeteer from "puppeteer";
import { PuppeteerAgent } from "@midscene/web/puppeteer";

const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
Promise.resolve(
  (async () => {
    const browser = await puppeteer.launch({
      headless: false, // 这里用有头模式方便调试
    });

    const page = await browser.newPage();
    await page.setViewport({
      width: 1280,
      height: 800,
      deviceScaleFactor: 1,
    });

    await page.goto("https://www.ebay.com");
    await sleep(5000);

    // ? 初始化 Midscene agent 
    const mid = new PuppeteerAgent(page);

    // ? 执行搜索
    // 注：尽管这是一个英文页面，你也可以用中文指令控制它
    await mid.aiAction('在搜索框输入 "Headphones" ，敲回车');
    await sleep(5000);

    // ? 理解页面，提取数据
    const items = await mid.aiQuery(
      '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格',
    );
    console.log("耳机商品信息", items);

    // ? 用 AI 断言
    await mid.aiAssert("界面左侧有类目筛选功能");

    await browser.close();
  })()
);

你是一名 AI 行业编辑，请围绕下面这条热点输出一份资讯解读：
热点：字节最新开源AI自动生成UI测试脚本要求：
1. 先用一句话解释这条热点在讲什么
2. 再总结它为什么重要
3. 说明会影响哪些 AI 产品或内容方向
4. 最后给出 3 个适合资讯站使用的标题