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

Question

我正在我的React Native项目中使用React导航，我正在为使用Detox设置自动化测试。

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

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

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

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

感谢任何人能提供的任何帮助。

Answer 1

在我的应用程序中使用react导航时，我也遇到了类似的问题。我目前使用的是react-Navigation2.2.0。

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

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

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

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

在您的screen组件中可以像这样设置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();

Answer 2

如果您在错误的位置添加，请尝试将其移动到createBottomTabNavigator

  createBottomTabNavigator(
    {
      YourStackLabel: {
        screen: YourStackNavigator,
        navigationOptions: {
          tabBarTestID: "yourBottomBarButtonTestId",
        },
      },
    }
  );

Answer 3

这些都在文档中(几乎) https://github.com/wix/detox/blob/master/docs/Troubleshooting.RunningTests.md#debug-view-hierarchy

基本上，react原生创建了一个原生布局，而Detox正在尝试匹配来自该原生布局的视图。为了检查布局层次结构，您需要使用每个平台提供的工具。

对于iOS，请使用调试视图层次结构

对于安卓系统，使用Hierarchy Viewer