介绍

Midscene 是 AI 驱动 UI 自动化测试框架，旨在通过多模态大语言模型（MLLM）技术解决传统自动化测试中的核心痛点，包括元素定位困难、脚本维护成本高、跨浏览器兼容性差等问题。与传统工具（如 Playwright、Cypress）相比，Midscene 创新性地引入自然语言交互模式，允许测试人员通过描述性指令完成复杂场景的自动化操作，无需编写传统代码。

环境搭建

初始化项目

npm init midscene@latest my-test-project
cd my-test-project

配置文件解析

midscene.config.ts 核心配置项：

export default defineConfig({
  testMatch: ['**/__tests__/**/*.test.[jt]s'],
  playwright: {
    chrome: {
      // 移动端设备预设
      viewport: { width: 375, height: 812 },
      userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)'
    },
    // 接口服务配置
    apiServer: {
      port: 3001,
      mockDir: './mocks'
    }
  }
});

安装依赖

npm install -D @midscene/playwright playwright
npx playwright install --with-deps

移动端Web自动化实战

基础手势模拟

// tests/mobile.spec.ts
import { test, expect } from '@midscene/playwright';

test('移动端表单测试', async ({ page }) => {
  await page.goto('/mobile-form');
  
  // 模拟点击输入框
  await page.locator('#name').touch();
  
  // 输入文本（自动处理移动端键盘）
  await page.locator('#name').fill('张三');
  
  // 长按操作
  await page.locator('.submit-btn').touch({
    force: true,
    duration: 2000
  });
  
  // 断言响应式布局
  await expect(page.locator('.success-modal')).toBeVisible();
});

复杂手势链

test('地图拖拽测试', async ({ page }) => {
  await page.goto('/map-demo');
  
  // 记录初始坐标
  const initialPos = await page.evaluate(() => 
    document.querySelector('#map').getBoundingClientRect()
  );

  // 执行拖拽手势（从中心向右上滑动）
  await page.touchscreen.drag({
    startX: initialPos.width/2,
    startY: initialPos.height/2,
    endX: initialPos.width/2 + 100,
    endY: initialPos.height/2 - 200
  });

  // 验证地图偏移量
  await expect(page.locator('#map')).toHaveCSS('transform', 'translate3d(100px, -200px, 0px)');
});

设备特性模拟

test('地理位置测试', async ({ page, context }) => {
  // 设置GPS坐标
  await context.grantPermissions(['geolocation']);
  await context.setGeolocation({
    latitude: 31.2304,
    longitude: 121.4737
  });

  await page.goto('/location-demo');
  await expect(page.locator('#current-location')).toContainText('上海');
});

接口自动化测试

接口Mock配置

在 mocks 目录创建 user.ts：

export default {
  'GET /api/user/info': (req, res) => {
    res.status(200).json({
      code: 0,
      data: {
        id: 'MOCK_123',
        name: '测试用户'
      }
    });
  },
  'POST /api/login': (req, res) => {
    const { username, password } = req.body;
    if (password === 'correct') {
      res.status(200).json({ token: 'MOCK_TOKEN' });
    } else {
      res.status(401).json({ code: 1001, message: '认证失败' });
    }
  }
};

接口测试用例

test('用户登录接口测试', async ({ api }) => {
  // 正常登录
  const res1 = await api.post('/api/login', {
    data: { username: 'admin', password: 'correct' }
  });
  expect(res1.status).toBe(200);
  expect(res1.data.token).toMatch(/MOCK_TOKEN/);

  // 异常登录
  const res2 = await api.post('/api/login', {
    data: { username: 'admin', password: 'wrong' }
  });
  expect(res2.status).toBe(401);
  expect(res2.data.code).toBe(1001);
});

前后端联调测试

test('订单创建全流程', async ({ page, api }) => {
  // 前置接口调用
  const loginRes = await api.post('/api/login', {
    data: { username: 'admin', password: 'correct' }
  });
  
  // 访问页面（携带Cookie）
  await page.goto('/order-create', {
    headers: {
      Authorization: `Bearer ${loginRes.data.token}`
    }
  });

  // 页面操作
  await page.locator('#product').selectOption('1001');
  await page.locator('.submit-btn').click();

  // 验证接口调用
  const lastRequest = api.getLastRequest('/api/order/create');
  expect(lastRequest.body.productId).toBe('1001');
});

进阶技巧

测试数据工厂

// utils/factories.ts
import { faker } from '@faker-js/faker';

export const createUser = (overrides = {}) => ({
  username: faker.internet.userName(),
  email: faker.internet.email(),
  ...overrides
});

// 用例中使用
const testUser = createUser({ role: 'admin' });

可视化测试报告

npx midscene test --reporter=html

生成的报告包含：

• 测试通过率仪表盘
• 失败用例视频回放
• 接口请求时间线
• 性能指标统计（首屏时间、资源加载等）

持续集成配置

# .github/workflows/ci.yml
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: midscenejs/setup-action@v1
      - run: npx midscene test --ci
      - uses: actions/upload-artifact@v3
        with:
          name: test-report
          path: ./midscene-report