如何在小部件层次结构中定位多个相同类型的小部件？

Question

我正在为我的一个 flutter-web 应用程序开发一些集成测试。考虑到从上到下的方法，我想在下面的小部件层次结构树中专门定位容器（宽度：50，高度：50）。 ParentWidget --> Row --> Text, SizedBox, Row --> Container(), Container(width: 50, height: 50), Container(). 注：无键入场

我尝试使用 ParentWidget 的后代 --> Row --> Row --> 和索引尝试定位到 select 第二个容器，但这不起作用，失败并显示错误 "错误状态：无元素".

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))));

Answer 1

要在测试中查找多个小部件，您可以这样做：

testWidgets('Test containers', (tester) async {
    
    await tester.pumpWidget(ParentWidget());

    expect(find.byType(Container), findsNWidgets(3));
  });

更多信息请查看https://docs.flutter.dev/cookbook/testing/widget/introduction

编辑：要测试第二个 Container 的宽度，您可以这样做：

//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);

Answer 2

如果您的小部件树嵌套很深，并且您想在树中找到特定的小部件，我们可以使用一些东西：如果 sub-widget 树包含多个相同类型的小部件...尝试通过索引定位它...查找将如何工作，它会尝试在 ParentWidget 下找到第二个容器子树。

final container = (find
          .descendant(
              of: find.byType(ParentWidget),
              matching: find.byType(Container),
              matchRoot: true)
          .evaluate()
          .elementAt(1)
          .widget as Container);

如何在小部件层次结构中定位多个相同类型的小部件？

How to locate multiple widget of same type in widget hierarchy?

flutter

dart

flutter-web

flutter-integration-test