• 简体中文
  • 在 GitHub Actions 中运行

    Midscene 提供了 midscene-action,用于在 GitHub Actions 中运行 Midscene Test。

    • 自动将测试结果汇总到工作流的 Summary。
    • 将 HTML 报告和测试数据保存为 Artifacts,供下载查看。
    • 按需将报告发布到 Cloudflare Workers,通过链接在线预览。

    尚未创建测试项目时,请先阅读创建和使用测试项目。

    示例

    • Basic:使用 AI 提交问候表单并检查结果。
    • TodoMVC:使用 AI 管理待办事项,并通过自定义 Node 验证结果。

    接入工作流

    运行 Action 前,先安装测试依赖、准备浏览器或设备,并配置模型。然后在工作流中添加:

    - name: Run Midscene tests
      id: midscene
      uses: web-infra-dev/midscene-action@v1
      with:
        working-directory: tests/midscene
        command: pnpm test
    • working-directory:测试项目相对于仓库根目录的路径。项目位于仓库根目录时填 .。
    • command:在测试项目目录中执行的命令,默认是 npx midscene-test。可以替换为项目已有的测试命令,如 pnpm test。

    完整工作流示例

    下面以 tests/midscene 下的测试项目为例。接入前,请确认测试项目可以在本地正常执行。

    1. 配置模型

    在 GitHub 仓库的 Settings → Secrets and variables → Actions 中添加:

    类型名称用途
    SecretMIDSCENE_MODEL_API_KEY模型服务的 API Key。
    VariableMIDSCENE_MODEL_NAME模型名称。
    VariableMIDSCENE_MODEL_BASE_URL模型服务地址。
    VariableMIDSCENE_MODEL_FAMILY模型系列,按所选模型填写。

    使用与本地相同的模型配置,具体值见支持的模型与配置。

    2. 添加工作流文件

    创建 .github/workflows/midscene.yml:

    name: Midscene E2E Tests
    
    on:
      push:
      workflow_dispatch:
    
    permissions:
      contents: read
    
    jobs:
      test:
        runs-on: ubuntu-24.04
        timeout-minutes: 20
        env:
          MIDSCENE_MODEL_API_KEY: ${{ secrets.MIDSCENE_MODEL_API_KEY }}
          MIDSCENE_MODEL_NAME: ${{ vars.MIDSCENE_MODEL_NAME }}
          MIDSCENE_MODEL_BASE_URL: ${{ vars.MIDSCENE_MODEL_BASE_URL }}
          MIDSCENE_MODEL_FAMILY: ${{ vars.MIDSCENE_MODEL_FAMILY }}
        steps:
          - uses: actions/checkout@v6
          - uses: pnpm/action-setup@v4
            with:
              version: 9.3.0
          - uses: actions/setup-node@v6
            with:
              node-version: '24'
          - name: Install dependencies and browser
            working-directory: tests/midscene
            run: |
              pnpm install --frozen-lockfile
              pnpm exec playwright install --with-deps chromium
          - name: Run Midscene tests
            id: midscene
            uses: web-infra-dev/midscene-action@v1
            with:
              working-directory: tests/midscene
              command: pnpm test

    根据项目实际情况调整 working-directory 和 command。完整参数说明见 midscene-action 文档。

    3. 发布报告到 Cloudflare Workers(可选)

    设置 publish-pages: true,将报告发布到 Cloudflare Workers。每次运行都会生成独立的预览链接,并显示在工作流的 Summary 中。

    托管费用与限制
    • 免费托管:静态文件的存储和访问不收费。计费说明
    • 保留上限:免费方案每个 Worker 最多保留 100 个 Preview。达到上限时,Cloudflare 会删除最久未部署的 Preview。限制说明
    • 文件限制:免费方案每个 Worker 版本最多包含 20,000 个文件,单个文件最大 25 MiB。官方限制

    创建 API Token

    根据 Worker 的配置方式选择 Token 权限:

    Worker 配置准备工作API Token 权限
    ⭐ 使用已有 Worker(推荐)
    • 在 Workers & Pages 中创建 Worker,将 cloudflare-worker-name 设置为其名称。
    • 在 Domains → Worker URL 中开启 Preview。
    Worker 的 Preview 开关位置
    选择 Specified Workers,选中目标 Worker,勾选 Individual Workers → Editor。

    指定 Worker 的 Editor 权限配置
    由 Action 创建 Worker将 cloudflare-worker-name 设为所需的 Worker 名称。选择 Entire Account,勾选 Workers → Admin,可管理该账号下的所有 Worker。

    Workers 产品级 Admin 权限配置

    保存确认弹窗中的 API Token 和 Account ID。Token 仅显示一次。

    启用发布

    在 Settings → Secrets and variables → Actions 中添加:

    • 仓库 Secret:CLOUDFLARE_API_TOKEN。
    • 仓库变量:CLOUDFLARE_ACCOUNT_ID。

    将前面运行测试的 Action 步骤改为:

    - name: Run tests and publish reports
      id: midscene
      uses: web-infra-dev/midscene-action@v1
      with:
        working-directory: tests/midscene
        command: pnpm test
        publish-pages: true
        cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
        cloudflare-account-id: ${{ vars.CLOUDFLARE_ACCOUNT_ID }}

    如需使用已有 Worker,将 cloudflare-worker-name 设为其名称。默认值为 midscene-reports。

    4. 查看测试报告

    测试运行结束后,可以在工作流的 Summary 中查看测试结果和报告入口。

    工作流 Summary 中的测试汇总、报告下载和在线预览入口

    读取 Action 输出

    为 Action 步骤设置 id: midscene 后,可以通过 ${{ steps.midscene.outputs.<name> }} 读取输出:

    输出用途
    test-result测试命令的执行状态。
    artifact-url已上传 Artifact 的下载页面链接。
    report-artifact-name已上传的 Artifact 名称;未上传文件时为空。
    page-url在线报告链接;发布未成功时为空。
    publication-result发布步骤的状态:success、failure、skipped 或 cancelled。