Level Up Your Integration Testing: Taking Screenshots like a Flutter Pro

Here’s a quick guide to capturing screenshots during your Flutter integration tests

Ready to snap some pixel-perfect moments? Let’s dive in!

First if you haven’t set up integration tests in your Flutter project yet, setup it by below blog:

Flutter Integration Testing

1 Replace your test_driver/integration_test.dart by below code:

2 Create a simple helper function for take screenshot in various devices:

2.a Write the Helper Function:

import 'dart:io';
import 'package:flutter/foundation.dart';

takeScreenShot({binding, tester, String? screenShotName}) async {
  if (kIsWeb) {
    await binding.takeScreenshot(screenShotName);
    return;
  } else if (Platform.isAndroid) {
    await binding.convertFlutterSurfaceToImage();
    await tester.pumpAndSettle();
  }
  await binding.takeScreenshot(screenShotName);
}

2.b Call It Whenever You Need a Screenshot:

await takeScreenShot(binding: binding, tester: tester, screenShotName: "login_page_screenshot");

2.c Let’s Understand in Details

• It will creates a folder called “screenshots” to store your images.
• It names each screenshot based on the file name you provide.
• It handles the actual screenshot capture using the takeScreenshot method.

3. Write the integration test

Time to see your tests glow up with effortless screenshots!

4. Run the integration test

Mobile

To test on a real iOS / Android device, first connect the device and run the following command from the root of the project:

flutter drive --driver=test_driver/integration_test.dart --target=integration_test/login_page_test.dart

Web

To get started testing in a web browser:

1. Download ChromeDriver Download ChromeDriver.
2. Launch chromedriver as follows:

chromedriver --port=4444

3. Run the test using the following command

flutter drive --driver=test_driver/integration_test.dart --target=integration_test/login_page_test.dart -d chrome