Finds Element without key

Question

i'm still new in using flutter driver in testing, but as far as i know there are few identifiers that we can use to locate / identify elements, like By Text, By Type, etc

But the problem is, the app that i want to test doesn't have the identifier that i can use to locate them (please correct me if i'm wrong).. the widget code of the app looks like this

  Widget _buildNextButton() {
    return Align(
      alignment: Alignment.bottomRight,
      child: Container(
        child: IconButton(
          icon: Icon(Icons.arrow_forward),
          onPressed: () => _controller.nextPage(),
        ),
      ),
    );
  }

where that widget is on a class that extends StatefulWidget.

How can i locate that icon in my test script and click it? can i use something like this? And what type of finder should i use? (byValueKey? bySemanticLabel? byType? or what?)

static final arrowKey = find.byValueKey(LoginKey.nextButton);
TestDriverUtil.tap(driver, arrowKey);

score 1 · Accepted Answer · edited Nov 03 '20 at 11:40

We have text and value checks here in Flutter Driver but if you don't have that you can always go the the hierarchy of app. what I mean by hierarchy is so button has fix or specific parent right?

Let's take your example here, We have Align > Container > IconButton > Icon widget hierarchy which will not be true for others like there might be IconButton but not with the Container parent. or StreamBuilder or anything that we can think of.

Widget _buildNextButton() {
    return Align(
      alignment: Alignment.bottomRight,
      child: Container(
        child: IconButton(
          icon: Icon(Icons.arrow_forward),
          onPressed: () => print("clicked button"),
        ),
      ),
    );
  }

This hierarchy should be atleast ideal for top bottom or bottom top approach.

Now what I mean by Top to bottom approach is Align must have IconButton and for bottom to up approach we are saying IconButton must have Align widget as parent.

Here i have taken top down approach so what I'm checking from below code is finding IconButton who is decendent of Align Widget. also i added firstMatchOnly true as I was checking what happens if same hierarchy appears for both so

test('IconButton find and tap test', () async {
  var findIconButton = find.descendant(of: find.byType("Align"), matching: find.byType("IconButton"), firstMatchOnly: true);
  await driver.waitFor(findIconButton);
  await driver.tap(findIconButton);

  await Future.delayed(Duration(seconds: 3));
});

to check for multiple IconButtons with same Align as parent, we need to have some difference like parent should be having Text view or other widget.

find.descendant(of: find.ancestor(
                  of: find.byValue("somevalue"),
                  matching: find.byType("CustomWidgetClass")), matching: find.byType("IconButton"), firstMatchOnly: true)

usually I go something like above where I have split the code in seperate file and check for that widget.

But ultimately find something unique about that widget and you can work on that.

this worked for me thanks for the clear explanation, if you mind could you see my other question here? i'm stuck with another flutter driver thing https://stackoverflow.com/questions/64682323/cannot-locate-text-widget-with-3rd-party-library — thekucays, Nov 04 '20 at 14:53
@Parthdave can you also look into below question which i think is somewhat related..... Trying to locate multiple widget of same type in widget hierarchy? https://stackoverflow.com/questions/71049030/flutter-integration-test-how-to-locate-multiple-widget-of-same-type-in-widget-h — Rajesh Patil, Feb 09 '22 at 12:04

score 0 · Answer 2 · answered Oct 23 '20 at 06:45

0

**In Lib directory dart class for connecting that widget**

class Testing extends StatelessWidget {

  Testing();

  // This widget is the root of your application.
  Widget build(BuildContext context) {

    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: YourClass(), // Next button containing class that need to test
    );
  }
}

**In Test directory**

testWidgets('Next widget field test', (WidgetTester tester) async {

      // Build our app and trigger a frame.
      await tester.pumpWidget(Testing());
      // find Widget
      var buttonFind = find.byIcon(Icons.arrow_forward);
      expect(buttonFind, findsOneWidget);

      IconButton iconButton = tester.firstWidget(buttonFind);
      expect(iconButton.color, Colors.blue);
    });

answered Oct 23 '20 at 06:45

Nadeem Abbas

17
4

is this also works on integration testing? becaus what i'm working on is writing integration tests – thekucays Oct 23 '20 at 10:35
Yes, you can do integration testing as well. – Nadeem Abbas Oct 23 '20 at 10:59
which library should i use on integration test btw? because there is no find.byIcon() on flutter driver library – thekucays Oct 27 '20 at 04:22
that is from unit testing flutter_test library and not flutter driver library. it's hard to merge both but in anycase who want to merge business testing and UI testing on same test case, doesn't make sense. – Parth Dave Nov 06 '20 at 15:16

Finds Element without key

2 Answers2