Appium Testing for Flutter Apps

Question 1

What is Flutter Framework?

Answer

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.

Question 2

What programming language does Flutter use?

Answer

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.

Question 3

How to create a Flutter app?

Answer

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.

Question 4

How to use the Appium Flutter Driver?

Answer

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.yaml file contains:

dev_dependencies:

  test: any

  flutter_test:

   sdk: flutter

  flutter_driver:

   sdk: flutter

Import the new dev_dependencies that you have added in the previous step.
```
flutter pub get
```
Your main.dart file should contain enableFlutterDriverExtension() before runApp.
```
void main() {
	enableFlutterDriverExtension();
	runApp(MyApp());
}
```
Make sure to import the flutter_driver_extension library in your main.dart file.
The Appium Flutter driver needs this to be included.
```
import 'package:flutter_driver/driver_extension.dart';
```

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

caps = Selenium::WebDriver::Remote::Capabilities.new
caps["automationName"] = "Flutter"

DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability("automationName", "Flutter");

$caps = array(
"automationName" => "Flutter"
);

capabilities = {
"automationName" : "Flutter"
}

const capabilities = {
"automationName" : "Flutter"
}

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.

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:

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

Question 5

How to build a Flutter app for testing?

Answer

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