Getting Screenshots Automatically in Flutter

"Flutter Meetup Tokyo #11"でのLT資料です。
https://flutter-jp.connpass.com/event/140588/

Transcript

1. Getting Screenshots Automatically in Flutter Hiroki Matsue (@macs_6) Sep 9th, 2019 Flutter Meetup Tokyo #11
2. https://itsallwidgets.com/flutter-app/mioswitch
3. This talk is about Getting Screenshots Automatically
4. 2 usage of sceenshots • Golden file testing • Catalog / Styleguide / Previews on Store
5. Golden files
6. Testing with golden files await expectLater( find.byType(RepaintBoundary), matchesGoldenFile( 'test_name.subtest.subfile.png', version: 0, ), );
7. https://github.com/flutter/goldens/tree/master/packages/ flutter/test/material
8. Update golden files $ flutter test --update-goldens https://help.github.com/en/articles/rendering-and-diffing-images
9. Check images diff on terminal https://github.com/flutter/goldens/blob/master/diff-images.sh #!/bin/sh compare $2 $1 png:- | montage -geometry +4+4 $2 - $1 png:- | display -title "$1" -
10. Catalog / Styleguide
11. https://flutter.dev/docs/catalog/samples/AnimatedListState
12. Flutter catalog pages are generated by sample_page.dart Catalog generation steps: 1. Put formatted comment to the code. 2. Generate markdown file and codes for flutter driver. • Render app's widgets one by one. 3. (Convert markdown file to HTML file and host it.) <= managed by committers
13. Tail of flutter/examples/catalog/animated_list.dart ... /* Sample Catalog Title: AnimatedList Summary: An AnimatedList for displaying a list of cards that stay in sync with an app-specific ListModel. When an item is added to or removed from the model, the corresponding card animates in or out of view. Description: Tap an item to select it, tap it again to unselect. Tap '+' to insert at the ... */
14. Generated markdown --- layout: page title: "AnimatedListState Sample Apps" permalink: /catalog/samples/AnimatedListState_index/ --- All of the sample apps listed here use the Flutter AnimatedListState class in an interesting way. The <a href="/catalog/samples/">Sample App Catalog</a> page lists all of the sample apps. <div class="container-fluid"> <div class="row" style="margin-bottom: 32px"> <a href="/catalog/samples/animated-list/"> <div class="col-md-3"> <img style="border:1px solid #000000" src="..." alt="Android screenshot" class="img-responsive"> </div> </a> ...
15. Result !
16. How to generate $ git clone https://github.com/flutter/flutter.git $ cd flutter/examples/catalog $ ../../bin/flutter packages get $ dart bin/sample_page.dart ${commit_hash} $ ../../bin/flutter drive test_driver/screenshot.dart
17. Flutter Driver "flutter drive" command runs apps on emulators or devices. Good to test apps performance.
18. Getting screenshots by Flutter Driver screenshot_test.dart driver = await FlutterDriver.connect(); ... await driver.waitUntilNoTransientCallbacks(); final List<int> pixels = await driver.screenshot(); final File file = new File(path); await file.writeAsBytes(pixels); print('wrote $file'); await driver.tap(find.byValueKey('screenshotGestureDetector'));
19. Screenshots in Flutter • 2 usage of sceenshots • Golden file testing • Catalog / Styleguide / Previews on Store • Use "matchesGoldenFile" for golden files testing • Use "driver.screenshot()" for catalog generation • sample_page.dart is good reference.
20. References • https://github.com/flutter/flutter/wiki/Writing-a-golden-file- test-for-package:flutter • https://api.flutter.dev/flutter/flutter_test/ matchesGoldenFile.html • https://github.com/flutter/goldens • https://github.com/flutter/flutter/blob/ 72a72b375afd2d9a341d62f70a2f30a324744d33/ examples/catalog/bin/sample_page.dart
21. Thanks