How to locate multiple widget of same type in widget hierarchy?
To find multiple widgets in a test you can do this:
testWidgets('Test containers', (tester) async {
await tester.pumpWidget(ParentWidget());
expect(find.byType(Container), findsNWidgets(3));
});
For more info check https://docs.flutter.dev/cookbook/testing/widget/introduction
Edit: To test the second Container's width you could do something like this:
//get the second element's widget, index 1, cast it as a container and check it's width
expect((find.byType(Container).evaluate().elementAt(1).widget as Container).constraints?.maxWidth, 50.0);
Rajesh Patil
Updated on January 03, 2023Comments
-
Rajesh Patil over 1 year
I am developing some intregration tests for one of my flutter-web application. I wanted to specifically locate the container(width: 50, height: 50) in the following below widget hierarchy tree considering top to bottom approach. ParentWidget --> Row --> Text, SizedBox, Row --> Container(), Container(width: 50, height: 50), Container(). Note: Without key approach
I tried to locate using descendant of ParentWidget --> Row --> Row --> with index tried to select the 2nd container, but this isn't working, it fails with error "Bad state: No element".
import 'package:flutter/material.dart'; class ParentWidget extends StatelessWidget { const ParentWidget({Key? key}); @override Widget build(BuildContext context) { return Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ Text("Hello World..!!"), SizedBox( width: 20, ), Row( crossAxisAlignment: CrossAxisAlignment.end, children: [ Container( width: 20, height: 20, color: Colors.red, ), Container( width: 50, height: 50, color: Colors.red, ), Container( width: 20, height: 20, color: Colors.red, ), ], ), ], ); } }
final container = tester.widget<Container>(find.descendant( of: find.descendant( of: find.byType(ParentWidget), matching: find.byType(Row)), matching: find.descendant( of: find.byType(Row), matching: find.byType(Container).at(1))));
-
Rajesh Patil over 2 yearsAbove testcase asserts for 3 container presence inside ParentWidget ....but i want to specifically locate the 2nd container and fetch its property like width and height etc... FYI: ParentWidget is just the subpart of the entire widget tree
-
Er1 over 2 years@RajeshPatil I've added a test case to test the width of the second container. Hope this helps