Flutterexperts

Introduction

In this post, we shall discuss about the flutter UI testing. Testing the UI of the app is an essential part of a developer side. It ensures the developer that the code is working in the required widget tree or not.

---

Table of content

1. Flutter Driver
2. Adding dependencies
3. Adding files
4. Methods in Flutter Driver class
5. Flutter driver element identification
6. Enabling the flutter driver
7. Writing the test
8. Run the test

---

Flutter Driver

Flutter driver is a class that creates a driver that uses a connection provided by the given serviceClient, _peer, and appIsolate.

It is very similar to testing frameworks such as Selenium WbDriver, Protractor, Google Espresso.

---

Adding dependencies

Integrate your flutter app by adding flutter_driver dependency.

Edit your pubspec.yaml file.

dev_dependencies:
  flutter_driver:
    sdk: flutter
  test: any

---

Adding Files

Create a folder test_driver and add two files in it app.dart and app_test.dart.

app_name/
  lib/
    main.dart
  test_driver/
    app.dart
    app_test.dart

---

Method in Flutter Driver class

There are 33 methods in the flutter driver class till now.

Some of them are discussed below…

• checkHealth

This method checks the status of the Flutter Driver extension.

This method return tow values.

1. HealthStatus.ok
2. HealthStatus.bad

• clearTimelime

This method clears all the timeline events recorder.

The timeout argument causes a warning to be displayed to the user if the operation exceeds the specified timeout.

• close

Closes the serverClient and _peer.

• enterText

This method enters a text into an inputField that is currently focused.

• forceGC

Force a garbage collection run in the VM.

• getBottomRight, getBottomLeft, getCenter, getTopRight, getTopLeft,

Return the point at the specified location of the widget identified by the finder.

• getText

This method returns the text in the Text widget located by the finder.

• requestData

It sends a string and returns a string.

• screenshot

Takes a screenshot of the event.

• tap

This method taps the widget located by the finder.

• waitFor

Waits until the finder locates the widget.

For more info please visit this link.

---

Flutter driver element identification

There are 4 methods to identify the element in flutter.

1. bySemanticsLabel()
2. byTooltip()
3. byType()
4. byValueKey()

Enabling the flutter driver

app.dart file

import 'package:flutter_driver/driver_extension.dart';
import 'package:fluttertest/main.dart' as app;

void main() {
  // This line enables the extension.
  enableFlutterDriverExtension();

// Call the `main()` function of the app, or call `runApp` with
  // any widget you are interested in testing.
  app.main();
}

Add the following code into your app.dart file

This will enable the flutter driver and call the runApp method.

Writing the test

Writing the test involves the four steps…

1. Create SerializableFinders to locate the widgets.
2. Connect to the app.
3. Test the scenarios.
4. Disconnect the app.

Create SerializableFinders to locate the widgets.

final writeDataFinder = find.byValueKey("write_data");
final addDataFinder = find.byValueKey("add_data");

Connect to the app

// Connect to the Flutter driver before running any tests.
setUpAll(() async {
  driver = await FlutterDriver.connect();
});

Test the scenarios

test("check health", () async {
  Health health = await driver.checkHealth();
  print(health.status);
});

test("flutter drive test", () async {
  await driver.tap(writeDataFinder);
  await driver.enterText(dummy_data);
  await driver.tap(addDataFinder);
});

In the first test, we are checking the health of the flutter driver extension.

In the second method, we are testing our flutter widgets using SerializableFinders.

Disconnect the app

tearDownAll(() async {
  if (driver != null) {
    driver.close();
  }
});

app_test.dart

https://gist.github.com/anmolseth06/2c11d58bef1860276ca7b05d533a0e81#file-app_test-dart

---

Run the test

Run the following command in your terminal window…

flutter drive --target=test_driver/app.dart

This command builds and launches the target app and runs the app_test.dart in test_driver/ folder.

Github Link

flutter-devs/Flutter-UITesting-Demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, and Twitter for any flutter related queries.

We welcome feedback, and hope that you share what you’re working on using #Flutter. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!

Thank you for reading. 🌸