4

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

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

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

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

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

但是通过“找不到 UI 元素”错误。

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

4

3 回答 3

11

在我的应用程序中使用 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();

于 2018-07-02T12:03:58.587 回答
1

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

  createBottomTabNavigator(
    {
      YourStackLabel: {
        screen: YourStackNavigator,
        navigationOptions: {
          tabBarTestID: "yourBottomBarButtonTestId",
        },
      },
    }
  );
于 2020-01-27T16:37:10.793 回答
-2

这一切都在文档中（几乎） https://github.com/wix/detox/blob/master/docs/Troubleshooting.RunningTests.md#debug-view-hierarchy

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

对于 iOS，使用 Debug View Hierarchy
对于 Android，使用Hierarchy Viewer

于 2018-03-12T07:31:52.430 回答