Flutter 驱动程序：测试 BottomNavigationBarItem

Posted 2023-02-23

【中文标题】Flutter 驱动程序：测试 BottomNavigationBarItem

【英文标题】：Flutter Driver: Test BottomNavigationBarItem

【发布时间】：2019-08-22 23:11:12

【问题描述】：

如何通过 FlutterDriver 测试 BottomNavigationBarItems？

FlutterDriver 允许通过 text、byValueKey、byTooltip 和 byType 访问小部件.

但是由于以下原因，这些方法都不适用于我的应用程序：

文本：应用已本地化，我需要测试多种语言的应用。

byValueKey：BottomNavigationBarItem 没有 key 属性。

byTooltip：BottomNavigationBarItem 没有 toolTip 属性。

byType：byType 只返回类型的第一个匹配项，没有列表（需要，因为我有多个选项卡）。

非常感谢！

干杯。

【参考方案1】：

不确定您是否找到了此问题的答案，但我将在此处发布适合我的解决方案。基本上，BottomNavigationBar 有一个您需要使用的 key 属性。一旦 Flutter Driver 识别出这个键，你就可以告诉驱动程序点击它的任何子项，即BottomNavigationBarItem。

我的屏幕有 2 个bottomNavigationBarItems，如下所示，我为它们的父小部件定义了键，即BottomNavigationBar：

bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
        key: Key('bottom'),
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.ac_unit, color: Colors.green,),
            title: Text('First', style: TextStyle(color: Colors.black),)
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.cast, color: Colors.yellow,),
            title: Text('Second', style: TextStyle(color: Colors.black),)
          )
        ],
      ),

我编写了一个颤振驱动程序测试来挖掘这两个项目，它们都运行良好。

test('bottomnavigationbar test', () async 
      await driver.waitFor(find.byValueKey('bottom'));
      await driver.tap(find.text('First'));
      print('clicked on first');
      await driver.tap(find.text('Second'));
      print('clicked on second too');
    );

结果：

【讨论】：

感谢您的回答。您的解决方案有效，但不幸的是不适合我。我的应用程序已本地化，因此根据您的语言有不同的文本。

@basedgod 我们不能在 Text 小部件上使用 key 吗？ ``` BottomNavigationBarItem(icon: Icon( Icons.settings), title: Text( 'Settings', key: const Key('settings'), ), ``` 这似乎对我有用。

【参考方案2】：

bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
        key: Key(`bottom`),
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.ac_unit, color: Colors.green,),
            title: InkWell(child:Text(`First`, style: TextStyle(color: Colors.black),key:Key(`First`)),)
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.cast, color: Colors.yellow,),
            title:  InkWell(child:Text(`Second`, style: TextStyle(color: Colors.black),key:Key(`Second`)),)
          )
        ],
      ),


test(`bottomnavigationbar test`, () async 
      await driver.waitFor(find.byValueKey(`bottom`));
      await driver.tap(find.byValueKey(`First`));
      print('clicked on first');
      await driver.tap(find.byValueKey(`Second`));
      print('clicked on second too');
    );

【讨论】：

感谢您的回答，但请解释代码及其工作方式/原因。仅使用代码很难理解答案。

将“InkWell”小部件添加为 BottomNavigationBarItem 的标题，并将 Text 添加为 InkWell 的子项。现在您可以拥有 InkWell 小部件的静态英文键，无需根据语言环境进行更改，之后使用“driver.tap(find.byValueKey('key'))” api 即可实现 BottomNavigationBarItem ontap 功能。

【参考方案3】：

正如@bsr 和@user12563357 所述，您可以在文本小部件上使用键：

bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
        key: Key('bottom'),
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.ac_unit),
            title: Text('First', key: Key('first'),)
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.cast),
            title: Text('Second', key: Key('second'),)
          )
        ],
      ),

在test中找到要点击的bar item的文字：

final firstItem = find.byValueKey('first');
await driver.tap(firstItem);

顺便说一句：您还可以使用 find.ancestor

找到 BottomNavigationBarItem

find.ancestor(of: firstItem, matching: find.byType("BottomNavigationBarItem"));

但你不能点击它。

【讨论】：

在Icon上放一个键有用吗？