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想定
The color of the widget is different with the counter application The color of the widget is different with the counter application

手順

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)
The color of the widget is different with the counter application

5. 実際にテストしてみる(ok編)

ok想定
The color of the widget is different with the counter application

以下コマンドでテストします。

flutter test

結果は

all tests passed! 

のはず。

6. 実際にテストしてみる(ng編)

goldenは変えずに、main.dartのプライマリーカラーを変えてみます。

ng想定
The color of the widget is different with the counter application

以下コマンドでテストします。

flutter test

結果は

some tests failed. 

のはず。

テストに失敗すると、testフォルダにfailuresファイルが作成され、その配下に何が違っていたかのスクショができあがっている.
見ての通り差分をちゃんと判定してくれている、

myapp_masterimage.png myapp_testimage.png myapp_maskeddiff.png myapp_isolateddiff.png
The color of the widget is different with the counter application The color of the widget is different with the counter application The color of the widget is different with the counter application The color of the widget is different with the counter application

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

Top