求推荐支持flutter_driver的Flutter集成测试HTML报告生成工具

阿华AIGC实验室

2026-5-9

我完全懂你这种找不到合适工具的 frustration——试过的Ozzie和screenshot库要么在Windows上跑不通，要么早就没人维护了，自己搞定了截图但还是缺个像样的HTML报告工具对吧？

这里给你几个可行的方向：

试试维护活跃的第三方库
可以看看flutter_test_report，它支持把Flutter测试（包括Flutter Driver的集成测试）的结果转换成结构清晰的HTML报告，而且最近还有更新，适配新版本Flutter的概率更高，你可以尝试集成到你的测试流程里。

基于现有截图能力自定义生成HTML报告
既然你已经实现了自定义截图，其实可以自己搭一个轻量的报告生成逻辑，灵活性反而更高：

测试过程中收集关键数据：每个测试用例的名称、执行状态（成功/失败/跳过）、耗时、对应的截图路径
准备一个简单的HTML模板，预留好测试结果列表和截图展示的位置（比如用表格布局）
测试结束后，用Dart的文件API把收集到的数据填充到模板里，生成最终的HTML文件

举个简单的代码示例：

// 模拟收集到的测试结果
final testCases = [
  {
    'title': '首页加载测试',
    'status': 'passed',
    'time': '1.8s',
    'screenshot': 'screenshots/home_loaded.png'
  },
  {
    'title': '商品详情跳转测试',
    'status': 'failed',
    'time': '2.1s',
    'screenshot': 'screenshots/detail_fail.png'
  }
];

// 读取预设的HTML模板
final template = await File('assets/report_template.html').readAsString();

// 生成测试结果的HTML片段
String buildTestSection() {
  final buffer = StringBuffer();
  for (final caseItem in testCases) {
    buffer.write('''
      <tr class="${caseItem['status']}">
        <td>${caseItem['title']}</td>
        <td>${caseItem['status']}</td>
        <td>${caseItem['time']}</td>
        <td><img src="${caseItem['screenshot']}" width="200"/></td>
      </tr>
    ''');
  }
  return buffer.toString();
}

// 填充模板并生成报告
final finalReport = template.replaceAll('{{TEST_CASES}}', buildTestSection());
await File('build/test_report.html').writeAsString(finalReport);