How to test Flutter Apps on Android Devices

Flutter is Google’s UI framework for cross-platform development and supports Linux, Mac, and Windows Operating Systems. 

It is simply a toolkit that is designed by developers to design beautiful interfaces for all sorts of screen sizes and devices. It comes with a whole bunch of pre-built widgets that make it easy to layout the app. This means that instead of having to make the iOS apps the Apple way and the Android apps the Android way, one can simply use a whole bunch of pre-built widgets from Flutter to design an app without worrying about the platform.

In this article, let’s explore how to test Flutter apps on Real Android devices.

Introduction to Flutter Apps

In Flutter, it is said that “Everything is a Widget” and these so-called Widgets are the building blocks for any Flutter App. Everything is a widget to the point where most of them themselves are made up of other widgets – even your app itself.

Flutter uses Dart language to create the most powerful mobile applications.

How to configure Flutter on Windows 

In this section, we will learn how to configure Flutter on your Windows 10. Follow all the steps and do NOT skip anything.

• First step is to download the Flutter SDK for Windows: Flutter_windows_2.10.3-stable.zip
• Extract the zip file and place the contained flutter in the desired location for the Flutter SDK (Eg. C:\Users\<Your-User-Name>\Documents)
  • Flutter should not be installed in a directory that requires elevated privileges (Eg. C:\Program Files\)
• Add Flutter to the PATH in the Environment variable
  • From the Start search bar, enter ‘env’ and select Edit environment variables for your account
  • Under User Variables, for the entry PATH, add a full path to the location where flutter\bin is in your system (Eg. C:\src\flutter\bin)
• Open Windows Powershell or Command Prompt Window and from the directory that has the Flutter (see above), run the below command to see if there are platform dependencies that should be completed:

C:\src\flutter> flutter doctor

• This command checks your environment and reports the status of your Flutter installation. You can see if there is any software that needs to be installed or further tasks to be performed.
• Once all the dependencies/software are installed, configure Android Studio in order to execute your test case.

Integrating Flutter Apps with BrowserStack Real Device Cloud

BrowserStack is a cloud-based web and mobile testing platform that allows the user to test their website and mobile applications across several browsers, Operating systems, and real mobile devices.

Follow the below steps to test Flutter App on Real Android Device using BrowserStack App Automate:

Step 1: Configure Appium

• Login to BrowserStack and launch App Automate.
• Choose the System/Language/Operating System of your choice from the available list i.e. Python Language is chosen for this particular example. Once chosen, you will be redirected to the Introduction page in Browserstack
• Follow the steps and set up the environment for the sample Python repository
• Make sure that Appium is installed in your system
  • If not installed, you can install it via the command: pip install Appium-Python-Client

Step 2: Upload App and Run Flutter Test on Android Device

• Upload an Android Native App(.apk or .aab file) to Browserstack servers.
  • If you do not have an Android App, you can use the sample Android App to run the test on BrowserStack App Automate. This example uses the sample Android App for testing

Note: app_url generated must be noted down since it is used as an identification for your uploaded app

• Locate the sample Android app’s python file (browserstack_sample.py) in your local system and configure your test script with the following:
  1. Desired Capabilities – Consists of Access credentials
  2. URL of the app under test
  3. Device and OS Version to run the test on (In this case, Oppo Reno 6)
  4. Other BrowserStack capabilities – Project, Build, Name
  5. Remote Webdriver to start a test session on BrowserStack
  6. Test case for sample Android App

• Enter the following code to test the Flutter App on Android Device Oppo Reno 6

import os

from appium import webdriver

from appium_flutter_finder.flutter_finder import FlutterElement, FlutterFinder

import time 

desired_cap = {

    # Set your access credentials

    "browserstack.user" : "Username",

    "browserstack.key" : "Password",

    # Set URL of the application under test (step 8)

    "app" : "bs://c700ce60cf13ae8ed97705a55b8e022f13c5827c",

    # Specify device and os_version for testing

    "device" : "Oppo Reno 6",

    "os_version" : "11.0",

    # Set other BrowserStack capabilities

    "automationName": 'flutter',

    "project" : "First Python project",

    "build" : "browserstack-build-1",

    "name" : "first_test"

}

# Initialize the remote Webdriver using BrowserStack remote URL

# and desired capabilities defined above

driver = webdriver.Remote(

    command_executor="http://hub-cloud.browserstack.com/wd/hub",

    desired_capabilities=desired_cap

) 

# Test case for the BrowserStack sample Android app.

# If you have uploaded your app, update the test case here.

finder = FlutterFinder()

email_finder = finder.by_value_key('email')

email_element = FlutterElement(driver, email_finder)

email_element.send_keys('abcc@gmail.com')

password_finder = finder.by_value_key('password')

password_element = FlutterElement(driver, password_finder)

password_element.send_keys('abcd1234')

login_btn_finder = finder.by_value_key('login_btn')

login_btn_element = FlutterElement(driver, login_btn_finder)

login_btn_element.click()

increment_finder = finder.by_value_key('increment')

counter_finder = finder.by_value_key('counter')

increment_element = FlutterElement(driver, increment_finder)

counter_element = FlutterElement(driver, counter_finder)

increment_element.click()

assert(counter_element.text == '1')

# Invoke driver.quit() after the test is done to indicate that the test is completed.

driver.quit()

• Open the Command Prompt, navigate to the android folder of the cloned sample Python repository in your local machine and run the command: 

python browserstack_sample.py

Test Results

You will be able to view your Test results on your BrowserStack account Dashboard.

On a closing note, to take full advantage of features, tests must be run on real mobile devices (iOS, Android, Windows, etc.), as opposed to Emulators and Simulators. There is no way to accurately identify all possible bugs without testing apps in real user conditions, and that is where BrowserStack App Automate comes in. BrowserStack’s real device cloud offers thousands of real mobile devices from major vendors and manufacturers for app testing (manual and automated). Each device is loaded with real operating systems – multiple versions of popular operating systems in use.

Essentially, QAs can access thousands of popular mobile device-OS combinations to test their app. They don’t have to worry about buying and updating devices and installing software. They just need to sign up for free, choose the required device-OS combination and start testing their app.