ARC: Add Resource ID to Flutter App

Open your Flutter app project.
Add the following dev_dependencies in the pubspec.yaml file of your Flutter project:

pubspec.yaml:

dev_dependencies: 
  test: any          
flutter_test:              
  sdk: flutter          
flutter_driver:              
  sdk: flutter

The

flutter_test and flutter_driver libraries provide functions and APIs respectively to write tests for Flutter apps.

Run the following command in the command-line/terminal of your Flutter project to install the

dev_dependencies added in the previous step:

flutter pub get

Add the following code statement in the

main.dart file of your Flutter project to import the flutter_driver_extension library:

import 'package:flutter_driver/driver_extension.dart';

Add the

enableFlutterDriverExtension() method before the runApp method in main.dart file as shown in the following code snippet:

 void main() {
 
     /// This will not allow to input test in the textfields in the flutter app.
     enableFlutterDriverExtension();
     /// This allows to input test in the textfields in the flutter app.
     enableFlutterDriverExtension(enableTextEntryEmulation: false);
     runApp(const MyApp());
     }

After you complete the preprocessing, run the build command from the following table to build your Flutter app in the debug or profile mode.

Note:
In the case of iOS 14 and above devices, build the app in the profile mode only.
Appium’s Flutter driver does not support apps built in the release mode.

Build commands:

iOS:

debug: flutter build ios --debug

profile: flutter build ios --profile

Android:

debug: flutter build apk --debug

profile: flutter build apk --profile

Add Resource ID to widgets:

Using Semantics Widget we can set resource-ID to the widget as shown below:

Semantics(
            identifier: "IDENTIFIER",
            child: TextField(
               controller: usernameController,
              )
          )

Here the identifier attribute helps us in identifying each widget unique in the automation tool.

As this identifier is string type, We need to add resource ID in a string format which is recommended.

Note:

In Android registration client we have static and dynamic (Coming from UI spec) widgets. Where we can define some constant identifiers in a util folder for static widgets and coming to dynamic widgets we can use any unique spec ID to use as Identifier, But unfortunately we don’t have such. So we could use some different mechanism to achieve this for dynamic widgets.
We could make use of "subType" : "consentText",
"templateName" : "Registration Consent",
These key & values to pass by modifying them a bit.
Defining static widget identifiers as below:

If a text “Welcome“ present in a login scree will define it as shown below and make use it in the screen with Semantics wrapped.

const String loginScreenLoginText = "LoginScreenLoginText";

After this we need to check the apk in Appium inspector with the help of Appium server.

These are the tools for Windows Operating System which we can use and check whether the changes made were updated or not.

Appium Server:

This is how Appium server initial page opens, Here we need to update the Hostas given in the Appium Inspector named as Remote Host example: 127.0.0.1

Post which we can start the server, Once server started you can see the server like below:

Appium Inspector:

Here we have to add the Desired Capabilities to run the flutter app. This will contain basic information about the app.
Let see some example:

JSON Presentation:

{
  "appium:deviceName": "sdk_gphone_x86", // Device in which the app is running
  "appium:automationName": "UiAutomator2", // Test Name
  "platformName": "android", // OS
  "appium:appPackage": "com.example.image_cropper_example", //App package name
  "appium:appActivity": "com.example.image_cropper_example.MainActivity", // Package name with main activity extention
  "appium:noReset": true
  }

Post which we add the data, Can click on start session to run the Appium inspector to perform the testing. After connected to the Phone / Device can check the ID shown in the below screenshot.

After selecting particular element / widget we can see the Resource ID in the right side panel.

This is how we add resource ID to our flutter app.

Android Registration Client