如何在React Native中同时设置testID和accessibilityLabel？

Question

我在设置React Native应用程序的accessibilityLabel和testID时遇到了奇怪的问题，目的是让iOS和Android应用程序中的“accessibility id”在Appium Inspector（Appium Desktop）中可见。问题如下：

1. 如果同时设置testID和accessibilityLabel，则iOS应用程序不会显示组件中的“accessibility id”，但Android应用程序会显示。
2. 如果仅设置testID，则iOS应用程序会在组件中正确显示“accessibility id”，但Android应用程序中缺少组件的“accessibility id”。
3. 如果仅设置accessibilityLabel，则Android应用程序会正确显示“accessibility id”，但iOS应用程序中会丢失“accessibility id”。

以下是我的代码：

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",

- shaveax

Answer 1

升级到React Native 0.64版本 - 它在安卓系统上对testID提供了适当的支持。请注意，由于安卓系统上的testID映射到视图的resource-id，因此Appium要求您的testIDs采用规范化的资源ID格式：<package>:id/<identifier>。

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

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

如果您正在使用 wd 库与 appium 通信，那么您可以执行以下操作：

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

- A. Goodale

---

哇，这个答案救了我。一开始我错过的一件事是，我需要将所有的elementByAccessibilityId调用更改为elementById。 - Mitch Downey

我们能用React Native 0.63.4做到吗？ - pravchuk

很遗憾，直到React Native 0.64版本，Appium才能访问Android上的testID。 - A. Goodale

这个问题从react-native@0.65.x开始已经不存在了！！！将testID显示为黑盒测试框架的资源ID（由@jdeff提供的#381fb3）; 更改日志：https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#android-specific-9 - DAVID _

@DAVID_ 那个更改已经被移植到了0.64分支。请参见https://github.com/facebook/react-native/commit/70ba9acfe97c05a04c1f0fb7a8f48f4c2d8c7072 - A. Goodale

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>

- user3635951

---

这已经不准确了，你可以直接使用accessibilityLabel和accessible true，例如 accessible accessibilityLabel={accessibilityLabel} />。https://reactnative.dev/docs/accessibility#accessibilitylabel - svnm

这就是我使用React Native 0.66 + Webdriverio的诀窍。 - SidFerreira

Answer 3

这个问题对我来说也很困难。

但是答案是：

在你的ID前使用test:id/，像这样

稍后，使用test:id/identifier来选择测试中的元素。

- Binni Zenobio Cordova Leandro

---

你好！你花费了这么多时间提供高质量的答案真是太棒了。然而，请记住，Stack Overflow通常不是人们为他们的回答获得报酬的地方，除了获得声望和徽章之外。请参阅关于自我推广的元帖：https://meta.stackexchange.com/a/59302 - Nol4635