Question

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

如果将testID与accessibilityLabel一起设置，则iOS应用不会在组件中显示“可访问性ID”，而android应用会显示。
如果仅设置testID，iOS应用将在组件中正确显示“可访问性ID”，而对于android，则在组件中缺少“可访问性ID”。
如果仅设置accessibilityLabel，则Android应用正确显示了“可访问性ID”，但缺少iOS应用。

这是我拥有的代码

export enum TestID {
  ImageLogo = 'ImageLogo'
}

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

此外，我尝试将accessible属性设置为false / true，但未成功我正在使用的React Native版本如下：

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

Answer 1

尝试为组件使用以下testID：

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

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

Answer 2

升级到 React Native 0.64 - 它对 Android 上的 testID 有适当的支持。请注意，由于 Android 上的 testID 映射到视图的 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")

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

2 个答案: