iOS & Android App Testing In Flutter Using Appium

Developed by Google, Flutter is a famous open-source technology for developing apps that work across several platforms. Unlike native app development, Flutter apps only need to be written once and then cross-compiled for use on numerous platforms, including Windows, Linux, Mac, iOS, and more. 

Moreover, Flutter is well-liked by programmers due to its comprehensive documentation. The addition of new features and Flutter’s functional stability make creating apps simpler.

Here’s how you can use Flutter with Appium mobile automation.

What is Flutter Framework?

Flutter is a mobile UI framework that allows developers to write apps for iOS, Android, and other platforms with only one set of code.

There are several fantastic frameworks available for creating mobile applications. Android offers a framework based on Java and Kotlin for developing mobile apps, while iOS uses a framework based on Objective-C or Swift for producing mobile apps.

So, programmers need two sets of tools—one for each operating system. Flutter is a popular cross-platform framework that simplifies app developers’ lives by reducing the amount of code they need to write.

Flutter Architecture

The Engine

It’s a lightweight runtime for top-notch mobile apps that’s primarily C++-based. It comes with a Dart runtime for compiling, creating, and running Flutter apps, necessary libraries for graphics, architecture plugins, support for accessibility, and more. To render simple images, the Engine relies on Skia, an open-source graphics library developed by Google.

It’s Library

The Foundation library has all the necessary packages that make up the foundation for creating a Flutter app. Developers used the Dart programming language to create these libraries.

Widgets

The official docs state that the fundamental idea behind the Flutter framework is “everything is a widget.” Essentially, the building blocks of a Flutter app are widgets. Each widget is a last statement about the user interface. Developers built the user interface (UI) by arranging widgets representing the application’s configuration or instructions for the various UI components.

Design Specific Widgets

Two distinct collections of widgets are available in the Flutter framework, each of which fits a different aesthetic.

What is Appium

Appium is a free and open-source framework for mobile app automation testing on multiple platforms, including Windows, Android, and automated iOS testing.

In terms of mobile test automation with Appium, it automates the following:

1. Mobile applications developed specifically for a mobile platform, such as iOS, Android, or Windows.
2. It automates mobile apps you can access using browsers like Chrome, Safari, or any other built-in browser. 
3. It can also automate hybrid apps.

Appium for Android is a versatile cross-platform testing framework that lets testers create test scripts against different platforms using the same API, such as iOS, Windows, and Android. Thus, QA engineers can utilize the same codebase for both iOS and Android.

Setting up Flutter

Creating A Flutter App

Setting up Flutter is easy. To create a Flutter app, first, it’s essential to recognize that stateless widgets are not the same as stateful ones. A stateless widget constructs a hierarchy of other widgets that more precisely describe the user interface, defining a subset of the UI. While the program runs, stateful widgets can change their state, and developers can redraw them multiple times.

You must install the Flutter software development kit (SDK) and any other framework-specific tools before creating a Flutter app. 

Appium Flutter Driver

The Flutter driver starts using the webSocket communicator – which uses the WDIO script to get the driver running. In this scenario, it transmits the request to the relevant app. Next, the AUT can use the Appium Flutter driver to reply to the script.

You can build Appium on your machine using the source code. After cloning the code, run the following code: 

run npm install 

then npm run built

type a command node to start the Appium server

Let’s use Appium to write a script for testing Flutter apps.

First, let’s begin with package.json

{

  “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”:” “

}

Now, we’ll use test.js. It 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’), ‘[email protected]’)

  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();

})();

Running Appium

To start Appium automation, first Install the needed node.js package:

npm install

Change the test.js Android configuration and run the following command:

APPIUM_OS=android npm start

Conclusion

Automated testing with Appium is a better option and necessary to meet the growing demand for thorough and rapid testing on a wide range of platforms, devices, and software versions. Organizations regard Appium as the best testing solution for teams adopting a continuous delivery methodology because of its superior practicality, adaptability, and affordability.

References:

https://www.browserstack.com/guide/test-flutter-apps-with-appium#:~:text=Appium%20is%20an%20open%2Dsource,iOS%2C%20Android%2C%20or%20Windows%20SDKs

https://medium.flutterdevs.com/appium-for-android-ios-mobile-apps-testing-in-flutter-709cee06f3

https://testingbot.com/resources/articles/appium-flutter-app-testing