尝试 GoldenTest

https://pub.dev/packages/golden_toolkit

使用此库进行验证

顺便说一句，主屏幕的截图被称为 Golden。

尝试测试计数器应用中 Widget 颜色不同的情况

OK 预期 NG 预期

步骤

1. 在 dev_dependencies 中添加 golden_toolkit

2. 在 test 文件夹中创建 golden_test.dart

3. 编辑 golden_test.dart

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:golden_toolkit/golden_toolkit.dart';
import 'package:flutter_golden_test_demo/main.dart';

void main() {
  testGoldens('app', (WidgetTester tester) async {
    //デバイスの画面サイズ
    final size = Size(415, 896);
    
    //第一引数はどのWidgetをビルドするのか指定、どのサイズにビルドするかがsurfaceSize
    await tester.pumpWidgetBuilder(MyApp(), surfaceSize: size);
    
    //正規のスクリーンショットと同じかテストする
    await screenMatchesGolden(tester, 'myApp');
  });
}

4. 创建 Golden（主屏幕截图）

运行以下命令，`test` 文件夹中应该会生成 `goldens` 文件，并且其中会有一个 `myApp.png` 文件。

flutter test --update-goldens
Golden (myApp.png)

5. 实际测试（OK 情况）

OK 预期

运行以下命令进行测试。

flutter test

结果应该是

All tests passed!

这样的。

6. 实际测试（NG 情况）

在不改变 Golden 的情况下，修改 `main.dart` 的主颜色。

NG 预期

运行以下命令进行测试。

flutter test

结果应该是

Some tests failed.

这样的。

如果测试失败，会在 `test` 文件夹下创建一个 `failures` 文件夹，里面会包含显示差异的截图。
正如你所见，它能准确地判断出差异。

myApp_masterImage.png myApp_testImage.png myApp_maskedDiff.png myApp_isolatedDiff.png

GitHub

查看 Github