如何与React Native一起设置testID和accessibilityLabel？

Question

我在为我的 React Native 应用程序设置 testID 和accessibilityLabel 时遇到一个奇怪的问题，这样做的目的是让 iOS 和 Android 应用程序上的“可访问性 id”在 Appium Inspector（Appium Desktop）中可见，问题如下:

1. 如果 testID 与accessibilityLabel一起设置，iOS应用程序不会在组件中显示“accessibility id”，但android应用程序会显示。
2. 如果我只设置 testID，iOS 应用程序会正确显示组件中的“辅助功能 id”，但对于 android 来说，组件中缺少“辅助功能 id”。
3. 如果我只设置accessibilityLabel，Android应用程序会正确显示“accessibility id”，但iOS应用程序会丢失。

这是我的代码

export enum TestID {
  ImageLogo = 'ImageLogo'
}

export const LogoComponent: React.FC = () => {
  return (
    <Image
      testID={TestID.ImageLogo}
      accessibilityLabel={TestID.ImageLogo}
    />
  );
};

另外，我尝试将可访问属性设置为 false/true 但没有成功我正在使用的 React Native 版本如下：

"react": "16.13.1",
"react-native": "0.63.2",

Answer 1

升级到 React Native 0.64 - 它testID在 Android 上有适当的支持。请注意，因为testID在 Android 上映射到resource-id视图，Appium 要求您的 testID 以资源 ID 的规范样式进行格式化：<package>:id/<identifier>。

在我们的应用程序中，我们对测试 ID 执行以下操作：

<Text testID="test:id/hello-text">Hello</Text>

如果您使用该wd库与 appium 对话，您可以执行以下操作：

await driver.elementById("test:id/hello-text")

Answer 2

尝试为您的组件使用以下 testID：

export default function testID(id) {
  return Platform.OS === 'android'
    ? { accessible: true, accessibilityLabel: id }
    : { testID: id }
}

<Text {...testID('hello-text')} >hello world</Text>