Roadmap
Terms

Flutter

Moropo offers first-class support for writing, running and scaling UI tests using the Flutter app development framework. This functionality works for both iOS and Android.

There are two key ways to make your Flutter Widgets testable in Moropo:

  1. Using Text

  2. Using Semantics Label

Interaction using Text

There are two main ways to expose text to Moropo:

  1. The data property in the Text widget

  2. The hintText or labelText properties in supporting widgets

For example, with the following TextButton widget:

TextButton(
  style: TextButton.styleFrom(
    primary: Colors.blue,
  ),
  onPressed: () { },
  child: Text('My button'),
)

You could then interact with this button using tapOn

- tapOn:
    text: My button

Interaction using Semantics Label

The Semantics class annotates a widget and can be used for accessibility in your Flutter app. This is a universal widget which can be used to wrap any other widget and add accessible labels. Moropo can access the label property in Semantics.

Semantics(
    label: "A label",
    child: ChildView()
)

Use the label to access the child view:

- tapOn: "A label"

As an example, let's add an accessible label to the Switch widget in a sample flutter app, Platform Design:

Initially this sample app has no accessible labels, there is also no way to add any accessible data directly to the Switch widget. Instead, we add a label to the Switch widget by wrapping it in a Semantics widget:

 Widget _buildList() {
    return ListView(
      children: [
        const Padding(padding: EdgeInsets.only(top: 24)),
         ListTile(
           title: const Text('Send me marketing emails'),
-          trailing: Switch.adaptive(
-            value: switch1,
-            onChanged: (value) => setState(() => switch1 = value),
+          trailing: Semantics(
+            label: 'Send me marketing emails',
+            child: Switch.adaptive(
+              value: switch1,
+              onChanged: (value) => setState(() => switch1 = value),
+            ),
           ),
         ),

Now if we run the app and interact with the switch, we can see the label for the first switch is visible by the Moropo test editor:

Last updated