Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

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

Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

Comments are closed.