Flutter is an open-source UI development framework, created by Google, to do cross-platform app development on iOS, Android, Linux, macOS and Windows.
The idea is that you write code once, then compile it for different platforms, similar to the React Native framework by Facebook.
Flutter offers nice features for developers:
- Extensive documentation to get started.
- Native Performance: Flutter code is compiled to native code for iOS/Android and other platforms.
- Hot reload to instantly see code changes.
Because of the increasing popularity in Flutter, this article will give an overview on how to run automated mobile app tests with Flutter apps and Appium.
What is Flutter Framework?
Flutter is a UI development framework, open-sourced by Google. It allows developers to create mobile apps on multiple platforms (including iOS and Android), with a single codebase.
The advantage of using a framework such as Flutter is that you no longer need to learn multiple programming languages for multiple platforms. You no longer need to learn Objective-C or Swift for iOS, or Java/Kotlin for Android.
Maintaining a single code base for app development means developers will be able to switch more easily between platforms and save time fixing bugs and implementing features.
What programming language does Flutter use?
Flutter apps are written in the Dart programming language. The app runs in the Dart virtual machine, which supports hot reloading. The apps are compiled directly to machine code, either x86 or ARM, or in JavaScript if compiled for the web.
At the core of Flutter is the Flutter engine, written in C++, which is responsible for UI, networking, compiling and more.
The Flutter framework is the component that is used by the developers. Flutter uses a reactive UI framework, similar to Facebook's React framework.
How to create a Flutter app?
Flutter is easy to install and configure. Simply follow the getting started documentation in the official Flutter documentation.
You'll need to download and install the Flutter SDK and XCode or Android Studio, depending on which targets you want to provide.
You can use the flutter doctor command to see if you have everything set up correctly.
Once you've configured everything, you can use a flutter command to create a demo application for you:
This command will create a directory with a bunch of files, necessary to build and run your Flutter app.
To see the actual code of the demo app's main screen, check out lib/main.dart
How to use the Appium Flutter Driver?
The Appium Flutter Driver allows you to run test automation against Flutter apps.
Before you install the Appium Flutter Driver, make sure you have a working setup of Appium.
You'll also need to compile your Flutter app in either debug or profile mode and use the enableFlutterDriverExtension before runApp.
To get started, please make sure to follow these steps:
-
Make sure your app's
pubspec.yamlfile contains: -
Import the new
dev_dependenciesthat you have added in the previous step. -
Your
main.dartfile should containenableFlutterDriverExtension()beforerunApp. -
Make sure to import the
flutter_driver_extensionlibrary in yourmain.dartfile.
The Appium Flutter driver needs this to be included. -
The
automationNamein your desired capabilities should be set toFlutter.
Below is a simple example on how to run a Flutter Automation test on a TestingBot device.
const wdio = require('webdriverio');
const assert = require('assert');
const { byValueKey } = require('appium-flutter-finder');
const caps = {
platformName: 'Android',
deviceName: 'Pixel 6',
version: '12.0',
app: 'https://github.com/testingbot/flutter-demo-app/releases/download/v1.0.0/demo.apk'
};
const opts = {
capabilities: {
...caps,
automationName: 'Flutter',
retryBackoffTime: 500,
hostname: 'hub.testingbot.com'
},
user: '...',
key: '...'
};
(async () => {
const counterTextFinder = byValueKey('counter');
const buttonFinder = byValueKey('incrementButton');
const driver = await wdio.remote(opts);
assert.strictEqual(await driver.getElementText(counterTextFinder), '0');
await driver.elementClick(buttonFinder);
await driver.touchAction({
action: 'tap',
element: { elementId: buttonFinder }
});
assert.strictEqual(await driver.getElementText(counterTextFinder), '2');
driver.deleteSession();
})();You can use several Finders via the Flutter API:
In the example above, we're using byValueKey which means your application needs to set a key:
How to build a Flutter app for testing?
Before you can run tests, you will need to generate a build of your Flutter app, with the modifications from the previous step.
The command to do this depends on whether you want to build an .apk file for Android, or a .ipa file for iOS physical device, or a .app file for iOS simulator.
Please see the table below on how to build the app:
| OS | Build Mode | Command |
|---|---|---|
| Android | debug | |
| profile | ||
| iOS | debug | |
| simulator | ||
| profile |
