Question

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

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

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

我也尝试通过它的文字找到元素：

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

但通过＆＃39;无法找到UI元素＆＃39;错误。

感谢任何人提供的帮助。

Answer 1

在我的应用程序中使用反应导航时，我遇到了类似的问题。我目前正在使用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，请使用Debug View Hierarchy
对于Android，请使用Hierarchy Viewer

在React Native中使用detox查找TabNavigator选项卡项

3 个答案: