react-native - 在 React Native 中查找具有排毒功能的 TabNavigator 选项卡项

Question

我在我的 React Native 项目中使用了 react-navigation，我正在为使用 Detox 设置自动化测试。

不幸的是，我在文档中没有看到任何关于如何告诉 detox 查找(然后当然点击)选项卡导航器的选项卡的内容。

我尝试使用 react-devtools 查看组件树，但无法确定哪个元素代表选项卡按钮本身。

我还尝试通过文本查找元素，如下所示:

await element(by.text('My Tab Button')).tap();

但这是通过“找不到 UI 元素”错误实现的。

感谢任何人可以提供的任何帮助。

Answer 1

在我的应用程序中使用 react-navigation 时，我遇到了类似的问题。我目前正在使用 react-navigation 2.2.0。

首先我尝试了以下方法:

await element(by.label('Tab Name')).tap();

这很有效，我很高兴，直到我尝试了一个不同的选项卡，其中选项卡名称与页面上的文本项匹配，这意味着有两个标签具有相同的文本，而 Detox 被混淆了。所以使用 by.label 仅当您可以保证页面上有该标签的一个实例时才有用。

我发现解决这个问题的方法是为屏幕设置 tabBarTestID 导航选项。只要您使用唯一的 id，就不应该有冲突。

设置 tabBarTestID 可以像这样在你的屏幕组件中完成:

class TabScreen extends Component {

  static navigationOptions = () => {
    return {
      title: 'Tab Name',
      tabBarLabel: 'Tab Name',
      tabBarAccessibilityLabel: 'Tab Name',
      tabBarTestID: 'Tab Name',
      tabBarIcon: ({ tintColor, focused }) => {
        return getTabIcon('Tab Name', focused);
      }
    };
  };

  render () {
    return (
      <View>
       ...
      </View>
    );
  }
}

export default TabScreen;

这意味着您现在应该能够在测试中使用:
await element(by.id('Tab Name')).tap();