Take screenshot throughout Flutter integration exams




I would really like introduce you a easy handbook about how take screenshot throughout integration exams in Flutter.

From Flutter 2.5.0 you possibly can take screenshot in your integration exams by quite simple means.

First for those who did not setup integration exams but, setup it by this handbook: https://flutter.dev/docs/cookbook/testing/integration/introduction

When you’ve already it, you possibly can proceed by this fashion:



1) Change your test_driver/integration_test.dart by this code:

import 'dart:io';
import 'bundle:integration_test/integration_test_driver_extended.dart';

Future<void> predominant() async {
  attempt {
    await integrationDriver(
      onScreenshot: (String screenshotName, Record<int> screenshotBytes) async {
        remaining File picture = await File('screenshots/$screenshotName.png').create(recursive: true);
        picture.writeAsBytesSync(screenshotBytes);
        return true;
      },
    );
  } catch (e) {
    print('Error occured: $e');
  }
}
Enter fullscreen mode

Exit fullscreen mode

It add onScreenshot occasion handler into your integration exams and after take your screenshot it would reserve it into screenshots listing in your undertaking. (This listing will likely be created when would not exists.)



2) Go into your integration_test/app_test.dart and add:

remaining binding = IntegrationTestWidgetsFlutterBinding();
IntegrationTestWidgetsFlutterBinding.ensureInitialized();
Enter fullscreen mode

Exit fullscreen mode

This should be earlier than all of your testWidgets when exams are initialized.



3) Into your check add:

await binding.takeScreenshot('test-screenshot');
Enter fullscreen mode

Exit fullscreen mode

In the event you run your exams on Android machine, you have to additionally add convertFlutterSurfaceToImage() perform earlier than takeScreenshot() as a result of there should be transformed a Flutter floor into picture:

await binding.convertFlutterSurfaceToImage();
await tester.pumpAndSettle();
await binding.takeScreenshot('test-screenshot');
Enter fullscreen mode

Exit fullscreen mode

For iOS or web you do not want this convert perform.



4) You may create a easy helper perform for take screenshot in numerous units:

import 'dart:io';
import 'bundle:flutter/basis.dart' present kIsWeb;

takeScreenshot(tester, binding) async {
  if (kIsWeb) {
    await binding.takeScreenshot('test-screenshot');
    return;
  } else if (Platform.isAndroid) {
    await binding.convertFlutterSurfaceToImage();
    await tester.pumpAndSettle();
  }
  await binding.takeScreenshot('test-screenshot');
}
Enter fullscreen mode

Exit fullscreen mode

So your exams can lastly appears like this:

import 'bundle:flutter/materials.dart';
import 'bundle:flutter_test/flutter_test.dart';
import 'bundle:integration_test/integration_test.dart';
import 'bundle:example_integration_test_screenshot/predominant.dart';
import 'helper.dart';


void predominant() {
  group('Check App', () {
  remaining binding = IntegrationTestWidgetsFlutterBinding();
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

    testWidgets('Check with take screenshot', (tester) async {
      await tester.pumpWidget(MyApp());
      await tester.pumpAndSettle();

      await tester.faucet(discover.byIcon(Icons.add));
      await tester.faucet(discover.byIcon(Icons.add));
      await tester.faucet(discover.byIcon(Icons.add));
      await tester.pumpAndSettle();

      await takeScreenshot(tester, binding);
    });
  });
}
Enter fullscreen mode

Exit fullscreen mode



Conclusion

So that’s all. After run of your exams you possibly can see a generated screenshot in screenshots/test-screenshot.png file:

I hope that this text was helpful and you may help me by ❤️ or some feedback beneath. 🙂



Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#screenshot #Flutter #integration #exams