Flutter integration_test - 截图

Question

Hey are there any possibilities to make a screenshot when using integration_test lib ( https://pub.dev/packages/integration_test ) for UI tests?

In flutter_driver it was bulid in method to take it. Here i coldn't find any.

Answer 1

I found an open issue on GitHub - https://github.com/flutter/flutter/issues/51890

They are working on that capability.

Answer 2

The flutter integration test example has the skeleton to perform screenshots

First create the driver for the integration test

//test_driver/foo_test.dart
import 'dart:io';
import 'package:flutter_driver/flutter_driver.dart';
import 'package:integration_test/integration_test_driver_extended.dart';

Future<void> main() async {
  final FlutterDriver driver = await FlutterDriver.connect();
  await integrationDriver(
    driver: driver,
    onScreenshot: (String screenshotName, List<int> screenshotBytes) async {
      final File image =
          await File(screenshotName).create(recursive: true);
      image.writeAsBytesSync(screenshotBytes);
      return true;
    },
  );
}

Then in your test

//integration_test/bar_test.dart
void main() {
  final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized()
      as IntegrationTestWidgetsFlutterBinding;

  testWidgets('screenshot', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    await tester.pumpAndSettle();
    await binding.convertFlutterSurfaceToImage();
    await tester.pumpAndSettle();
    await binding.takeScreenshot('screenshots/screenshot.png');
  }
}

Then

flutter drive --driver=test_driver/foo_test.dart --target integration_test/bar_test.dart 

Note:

• the screenshot is a png
• You cannot save directly from the test without tweaks (explain the necessity of a driver)

Answer 3

From Flutter version 2.5.0 you can take a screenshot by very simple way. Here is manual about how to do it: https://dev.to/mjablecnik/take-screenshot-during-flutter-integration-tests-435k