在 React Native 中查找带有 detox 的 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();

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 native 会创建一个原生布局，而 Detox 会尝试匹配来自该原生布局的视图。为了检查布局层次结构，您需要使用每个平台提供的工具。

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