Appium Testing for Flutter Apps

Learn how to do automated mobile app testing with Flutter and Appium.

By Jochen D.

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.

Table of Contents

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:

Copy code
flutter create demo_app

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:

  1. Make sure your app's pubspec.yaml file contains:

    Copy code
    dev_dependencies:

  test: any

  flutter_test:

   sdk: flutter

  flutter_driver:

   sdk: flutter

  2. Import the new dev_dependencies that you have added in the previous step.

    Copy code
    flutter pub get

  3. Your main.dart file should contain enableFlutterDriverExtension() before runApp.

    Copy code
    void main() {
	enableFlutterDriverExtension();
	runApp(MyApp());
}

  4. Make sure to import the flutter_driver_extension library in your main.dart file.
    The Appium Flutter driver needs this to be included.

    Copy code
    import 'package:flutter_driver/driver_extension.dart';

  5. The automationName in your desired capabilities should be set to Flutter.

    Copy code
    caps = Selenium::WebDriver::Remote::Capabilities.new
caps["automationName"] = "Flutter"
    Copy code
    DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability("automationName", "Flutter");
    Copy code
    $caps = array(
"automationName" => "Flutter"
);
    Copy code
    capabilities = {
"automationName" : "Flutter"
}
    Copy code
    const capabilities = {
"automationName" : "Flutter"
}
    Copy code
    DesiredCapabilities caps = new DesiredCapabilities();
caps.SetCapability("automationName", "Flutter");

Below is a simple example on how to run a Flutter Automation test on a TestingBot device.

Copy code
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:

Copy code
Text(
  '$_counter',
  key: Key('counter'),
  style: Theme.of(context).textTheme.headline4,
)

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
Copy code
flutter build apk --debug
profile
Copy code
flutter build apk --profile
iOS debug
Copy code
flutter build ios --debug
simulator
Copy code
flutter build ios --simulator
profile
Copy code
flutter build ios --profile

Conclusion

The Appium Flutter driver allows developers and testers to easily test mobile Flutter apps with Appium.
The advantage of using a cloud based mobile device provider is that you can run tests on multiple devices, simultaneously.

You no longer need to set up, configure, maintain and update a fleet of devices. Rely on a device farm such as TestingBot to do the work for you.

More information is available in our Flutter Automated Testing documentation section.

Ready to start testing?

Start a free trial