Automating mobile apps on built on Flutter

ACCELQ supports automating mobile apps built on Flutter SDK. But to enable element identification on these apps, the app developer must ensure certain requirements. This article explains these pre-requisites.

Mobile Automation on Flutter Apps relies on Semantics Tree to find elements. This means during the development of the app, the output of Semantics Tree must be verified for proper automatability.

Most of the built-in widgets in Flutter come with proper Semantic properties which makes the element identifiable. But sometimes with custom Widgets, this issue can be seen. For example, in the below screenshot, Semantics Tree merged all the child elements into a single android.view.View. This will not allow automation runtime to access the elements under this tree. In the example here, automation cannot identify the "Visit" button. 

To fix this issue, custom Widgets must be wrapped with a Semantics Widget. There are three options in Flutter - Semantics, MergeSemantics, and ExcludeSemantics. Using one of these options and selecting attributes, element identification in flutter widgets can be fixed. An example here:

To verify this is done properly, Flutter provides a property to view the Semantics Tree. Simply add `showSemanticsDebugger: true` as in the below image.

After adding the Semantics widget with all attributes and setting `showSemanticsDebugger: true` the app will render with the elements properly identified  on the screen, as shown below.