Essential Guide to Flutter Test Automation

As mobile phones have advanced in technology, the world has been completely revolutionized. Since Android and iOS are used on most mobile devices, businesses trying to cater to this demand must create applications for both operating systems and a web version for desktops. 

This opens the door for so much work and hectic maintaining all these native applications. The most optimized yet easy solution would be to create one codebase and maintain that one codebase to work for all devices. 

• Flutter is a development kit offered by Google that solves the above problem. 
• In the development context, Flutter is designed so that the code can be written once and used across all platforms. 
• Having one codebase running across all platforms minimizes development costs, reduces production, and saves testing time.

What is Flutter? 

Flutter has recently gained immense popularity due to its ability to produce cross-platform applications. Flutter applications are written once, and their codebase is compiled to create applications across various Android, iOS, and web platforms. It is backed by a tech giant of the world, Google. 

The Flutter test framework is based on widget development. It requires coding in Dart language, which can be compiled into different native applications. Dart is a programming language created by Google, similar to JavaScript but has static checking and strong node features.

As per Statista, Flutter was one of the most used cross-platform mobile frameworks used by software developers worldwide in 2021.

Source

Since Google has created Flutter, an open-source mobile UI framework, it automatically builds trust among the people to use it to scale their businesses. Creating a native application on Android and iOS platforms requires extensive coding in different languages for creating individual applications. A cross-platform application is a better yet needed alternative.

Importance/Benefits of Flutter Testing 

The idea behind implementing Flutter on your project must have been clear until now, but let’s summarize all the top 4 benefits of Flutter UI testing. 

1. Flutter testing identifies and resolves errors quickly. 
2. Flutter testing improves the quality of the development process. 
3. Ensures proper functionality irrespective of the number of developers collaborating on the project. 
4. Ensures reliable applications are created before launching to real-world users. 

How to test Flutter applications?

We are convinced that Flutter testing tools are a great option for developing cross-platform applications; therefore, let’s now understand how to test Flutter applications. 

Flutter app testing is done in two ways: Manual and Automated testing.

• In manual testing, errors are handpicked in the Flutter applications
• In Automated testing, tests are run automatically, and their results are analyzed to resolve errors. 
• Manual testing is done for UI UX mockup testing, testing widgets, and more.

1. Manual Flutter Testing on a Real Device Cloud

It is important to test your applications in several combinations of devices-browsers-OS to ensure proper reliability of applications in terms of UI and UX. One of the most preferred ways is to consider a real device cloud for testing instead of setting up a device lab, as a better and cost-efficient process. 

2. Flutter UI Automation Testing using FlutterDriver

FlutterDriver is a testing framework or package to run automated testing on Flutter applications. It is a greater alternative for Flutter UI tests in applications instead of going along with the conventional process. Moreover, it is convenient and straightforward to set up and use. 

First, let’s create an application on Flutter and try to run Flutter testing using FlutterDriver on our application.

Prerequisite 

1. Install any IDE of your choice. Select IDE based on the platform for which you will develop the application primarily. VS code for Android and XCode for iOS. This is important since you would want to test your application simultaneously. In this example, we are using VS Code. Also, install the Flutter plugin and Dart plugin in VS Code. 
2. Install Microsoft Visual Studio if you want to run the flutter app on windows. Also, install the workload “desktop development with C++” inside Visual studio. 
3. Install FlutterSDK on your system. 

Step 1: Create Flutter Project

First open any folder in VS code where you want to start your Flutter project. Then, open the terminal in VS code and follow the command to create a new Flutter application. 

flutter create sampleproject

Step 2: Write the application 

After successfully creating the project, you will get a Flutter counter application by default. We shall learn the Flutter app testing in this default application. 

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Counter App',
home: MyHomePage(title: 'Counter App Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
key: const Key('counter'),
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
key: const Key('increment'),
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}

To view the application, follow the command in the root folder of your project. 

flutter run

After the command is executed in the terminal, it will scan all the available devices, and will ask you to pick one on which you want to run your Flutter application. 

Let’s see how to perform Flutter testing using FlutterDriver. We shall write a test for the sample Flutter application. In the test, we shall validate the functioning of the elements present in the application. 

Step 3: Add the Flutter driver dev dependency 

Open the pubspec.yaml file and edit the default value inside the dev_dependencies tag to enable the integration testing with Flutter Driver.  

dev_dependencies:
integration_test:
sdk: flutter
flutter_test:
sdk: flutter

Talk to an Expert

Step 4: Create test script 

There are several methods available in the FlutterDriver, to write automated tests. These methods are useful in navigating the application to perform several operations, such as tapping, entering data, scrolling, and more. 

Some of the methods are: 

• tap()
• enterText()
• waitFor()
• waitForAbsent()
• scrollIntoView()

Moreover, we can identify UI elements in Flutter driver using the following ways:

• bySemanitcsLabel(..)
• byTooltip(…)
• byType(…)
• byValueKey(..)

Paste the following test script inside the integration_test/app_test.dart file. 

import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';

import 'package:counter_app/main.dart' as app;

void main() {
IntegrationTestWidgetsFlutterBinding.ensureInitialized();

group('end-to-end test', () {
testWidgets('tap on the floating action button, verify counter',
(tester) async {
app.main();
await tester.pumpAndSettle();

// Verify the counter starts at 0.
expect(find.text('0'), findsOneWidget);

// Finds the floating action button to tap on.
final Finder fab = find.byTooltip('increment');

// Emulate a tap on the floating action button.
await tester.tap(fab);

// Trigger a frame.
await tester.pumpAndSettle();

// Verify the counter increments by 1.
expect(find.text('1'), findsOneWidget);
});
});
}

Step 5: Running the test

Follow the command on the root folder of your project to execute the test. 

flutter test integration_test/app_test.dart

Upon running the test script, the output in the terminal is displayed. 

3. Automated Flutter UI Test on a Real device cloud

A real device cloud supporting Flutter Appium automation is an excellent choice for automation testers. The only thing the automation tool must have is the collection of real devices and their servers are maintained well. 

Flutter automated UI testing is easier using BrowserStack’s real device cloud, integrating CI/CD technologies. The process speeds up testing, increases scalability, enables easy collaboration, and makes the tests more maintainable.

The process to test Flutter apps involves preprocessing your app, uploading it to BrowserStack, adding the automationName capability to your test script along with the app ID, and then running your test script

Get Started with Flutter Testing

Closing Notes

A popular cross-platform mobile framework, Flutter is steadily rising in popularity among software developers across the globe. Being a cross-platform framework, it has the ability to render the same codebase for multiple platforms such as Android, iOS, Linux, and the web. As a result of its backing by Google, the tech giant of the world, Flutter has become a trusted choice for developers. 

There are three ways to test Flutter applications: manually, automatically, and using FlutterDriver. Generally, manual testing in Flutter ensures the user experience, while automated testing ensures reliability and functionality.