How to Test Flutter Apps Using Appium Automation

Home Guide How to Test Flutter Apps Using Appium Automation

How to Test Flutter Apps Using Appium Automation

Flutter, Google’s open-source UI toolkit, has gained popularity for its ability to build cross-platform applications from a single codebase.

It allows developers to create high-performance apps for iOS, Android, web, desktop, and even Google Fuchsia with minimal effort. With Flutter’s growing adoption, ensuring app quality through efficient testing is essential.

This article explores how to automate Flutter app testing using Appium, a widely used open-source framework for mobile test automation.

What is Flutter Framework?

Flutter is an open-source mobile UI framework that can create Android and iOS apps (among other platforms) from a single codebase.

Multiple frameworks provide excellent features to develop mobile applications. For developing mobile apps, Android provides a framework based on Java and Kotlin, while iOS utilizes a framework based on Objective-C or Swift language.

Therefore, devs need two different languages and frameworks to develop applications for both OS. Naturally, a cross-platform framework like Flutter makes life simpler for app developers, saving time, resources, and effort.

Features of Flutter Framework

Flutter is a modern and highly responsive framework designed for seamless cross-platform app development. It leverages the Dart programming language, known for its simplicity and efficiency.

Reactive and Modern: Ensures smooth and dynamic app performance.
Easy-to-Learn Language: Uses Dart, making development straightforward and accessible.
Rapid Development: Offers hot reload for faster iteration and debugging.
Smooth and Engaging UI: Provides a native-like user experience across platforms.
Extensive Widget Library: Comes with a rich collection of pre-built and customizable widgets.
Consistent UI Across Platforms: Maintains a uniform look and feel across iOS, Android, web, and desktop.

Flutter Architecture

Flutter’s architecture is built on four key components:

Flutter Engine: A portable C++ runtime that powers Flutter apps, handling animations, graphics, file I/O, plugins, and accessibility. It includes a Dart runtime and uses Google’s Skia for rendering.
Foundation Library: A collection of essential Dart packages that provide the core functionalities needed to build Flutter applications.
Widgets: The building blocks of Flutter apps. Based on the principle that “everything is a widget,” they define UI structure and behavior.
Design-Specific Widgets: Flutter provides two design sets: Material Design for Android and Cupertino for iOS, ensuring a native-like experience on each platform.

What is Appium?

Appium is an open-source framework that allows QAs to conduct automated app testing on different platforms like Android, iOS, and Windows.

It automates testing for:

Native Mobile Applications that are written using iOS, Android, or Windows SDKs
Mobile Web Applications that can be accessed using mobile browsers such as Safari, Chrome, or in-built native browser applications for Android devices
Hybrid Mobile Applications that have a native wrapper around the web view

Appium is a flexible cross-platform testing framework, enabling testers to write test scripts against multiple platforms such as iOS, Windows, and Android using the same API. That means QAs can use the same code for iOS as for Android.

How to Create a Flutter App

To build a Flutter app, it’s essential to understand the difference between stateless and stateful widgets. Additionally, setting up the Flutter SDK and related tools is crucial for a smooth development process.

Understand Widgets: Stateless widgets remain unchanged, while stateful widgets update dynamically.
Install Flutter SDK: Download and install the Flutter SDK based on your OS.
Set Up Dependencies: Ensure all required tools and dependencies are installed.
Choose an IDE: Use IntelliJ IDE and install Dart and Flutter plugins.
Create a New Project: Run flutter create project_name to generate a new Flutter app.
Start Development: Open the project in the IDE and begin building.

Using Appium Flutter Driver for Flutter App Automation

Flutter driver in Appium is an automation tool for Flutter apps that can be used on various platforms.

It uses webSocket communication to carry the WDIO script to start the Flutter driver. In this case, the request will be sent to the particular application. After that, the AUT will be able to send the response to the script through the Appium Flutter driver.

One can also build Appium in their machine through the source code. After cloning the source code:

run npm install 
then npm run built
type a command node to start the Appium server

Using Appium Flutter Finder

Appium Flutter Finder is used by Appium to interact with the Flutter elements. It is a part of Appium Flutter Driver package and mimics the CommonFinders Class of Flutter Driver Library.

Step 1 Download the package from GitHub.

The package consists of:

Appium Flutter Driver
Appium Flutter Finder

Step 2 Clone the sample project to get the WDIO code.

Now let’s start with writing a script for testing Flutter apps using Appium.

First, let’s begin with package.json

package.json – Package which is required by appium-flutter-driver

{

  "name": "appium",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "dependencies": {

    "appium-flutter-finder": "0.0.13",

    "webdriverio": "^5.15.0"

  },

  "scripts": {

    "start": "node test.js",

    "ios": "APPIUM_OS=ios npm start",

    "android": "APPIUM_OS=android npm start",

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "xyz",

  "private": true,

  "license": ""

}

Talk to an Expert

test.js – This is the main testing file.

const wdio = require('webdriverio');

const assert = require('assert');

const find = require('appium-flutter-finder');



const osSpecificOps = process.env.APPIUM_OS === 'android' ? {

  platformName: 'Android',

  deviceName: 'emulator-5554',     {Mention your device name}

  app: __dirname +  '/..Mention the path',

}: process.env.APPIUM_OS === 'ios' ? {

  platformName: 'iOS',

  platformVersion: '12.2',

  deviceName: 'iPhone X',

  noReset: true,

  app: __dirname +  '/../ios/Runner.zip',



} : {};



const opts = {

  port: 4723,

  capabilities: {

    ...osSpecificOps,

    automationName: 'Flutter'

  }

};



(async () => {

  console.log('Initial app testing')

  const driver = await wdio.remote(opts);

   assert.strictEqual(await driver.execute('flutter:checkHealth'), 'ok');

  await driver.execute('flutter:clearTimeline');

  await driver.execute('flutter:forceGC');



  //Enter login page

  await driver.execute('flutter:waitFor', find.byValueKey('loginBtn'));

  await driver.elementSendKeys(find.byValueKey('emailTxt'), 'xyz@gmail.com')

  await driver.elementSendKeys(find.byValueKey('passwordTxt'), '123456')

  await driver.elementClick(find.byValueKey('loginBtn'));



  //Enter home page

  await driver.execute('flutter:waitFor', find.byValueKey('homeGreetinglabel'));

  assert.strictEqual(await driver.getElementText(find.byValueKey('homeGreetinglabel')), 'Welcome to Home Page');



  //Enter Page1

  await driver.elementClick(find.byValueKey('page1Btn'));

  await driver.execute('flutter:waitFor', find.byValueKey('page1GreetingLabel'));

  assert.strictEqual(await driver.getElementText(find.byValueKey('page1Greetinglabel')), 'Page1');

  await driver.elementClick(find.byValueKey('page1BackBtn'));



  //Enter Page2

  await driver.elementClick(find.byValueKey('page2Btn'));

  await driver.execute('flutter:waitFor', find.byValueKey('page2GreetingaLbel'));

  assert.strictEqual(await driver.getElementText(find.byValueKey('page2GreetingLabel')), 'Page2');

  await driver.switchContext('NATIVE_APP');

  await driver.back();

  await driver.switchContext('FLUTTER');



  //Logout application

  await driver.elementClick(find.byValueKey('logoutBtn'));

  driver.deleteSession();

})();

Run Appium to test the Flutter App

To run the Appium Project, follow the steps below:

Change directory to “appium” folder
Start the Appium server with the command “appium” in the console
Start Android emulator (check emulator address with “adb devices)

Install required nodejs package

npm install

And change Android configuration in test.js“)
and run command

APPIUM_OS=android npm start

to start Appium automation.

And that is how one can automate Flutter apps using the Appium framework.

To keep up with the demands of fast and reliable testing across various platforms, devices, and versions, automation testing using Appium is not just preferable but highly recommended. Favored throughout the industry, Appium offers feasibility, flexibility, and cost-friendliness above other testing tools, enabling teams to deliver great user experiences within the continuous delivery approach.

Test on Real Mobile Devices with BrowserStack

Running Appium tests on real mobile devices is essential to detect all possible bugs under real user conditions.

Simulators and emulators cannot fully replicate actual device performance, making real device testing a critical step in ensuring app quality.

Benefits of Testing on BrowserStack’s Real Device Cloud:

Access to real devices: Test on thousands of real iOS, Android, and Windows devices.
Multiple OS versions: Ensure compatibility across different OS updates.
No device maintenance: Eliminate the need to buy, update, and manage physical devices.
Instant setup: Sign up, select a device-OS combination, and start testing immediately.
Accurate bug detection: Identify real-world issues by testing in real user conditions.

Run Appium Tests on Real Mobile Devices

Useful Resources for Flutter

Conclusion

Automating Flutter app testing with Appium ensures efficiency, accuracy, and broader test coverage across devices and platforms.

By leveraging real device testing on BrowserStack, teams can detect real-world bugs, optimize app performance, and deliver a seamless user experience. Integrating automation into the testing pipeline enhances speed, reliability, and overall app quality.

Run Flutter App Test with Appium

Use BrowserStack App Automate to Test Flutter App with Appium on Real Devices for accurate results

How to Test Flutter Apps Using Appium Automation