在React Native中使用排毒功能查找TabNavigator标签项

Question

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

不幸的是，我在文档中没有看到有关如何告诉排毒找到（然后点击）标签导航器标签的任何内容。

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

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

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

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

感谢您提供任何帮助。

Answer 1

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

首先，我尝试了以下方法：

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

这行得通，我很高兴，直到我尝试使用另一个选项卡，该选项卡名称与页面上的文本项匹配，这意味着有两个标签具有相同的文本，排毒变得困惑。因此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();