How to set the testID and the accessibilityLabel together with React Native?

user_9154046 0
Viewed 5935

I am having a weird issue setting the testID together with the accessibilityLabel for my React Native application, the purpose of this is to have the "accessibility id" on iOS and Android app visible with Appium Inspector (Appium Desktop), the issue is the following:

  1. If the testID is set together with the accessibilityLabel, the iOS app does not show the "accessibility id" in the component but the android app does.
  2. If I only set the testID, the iOS app shows correctly the "accessibility id" in the component but for android is missing the "accessibility id" in the component.
  3. If I only set the accessibilityLabel, the Android app shows the "accessibility id" correctly but the iOS app is missing.

here is the code that I have

export enum TestID {
  ImageLogo = 'ImageLogo'
}

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

Also, I've tried to setup the accessible attribute to false/true without success The React Native version that I am using is the following:

"react": "16.13.1",
"react-native": "0.63.2",
appium react-native android ios
3 Answers

Upgrade to React Native 0.64 - it has proper support for testID on Android. Note that because testID on Android maps to the resource-id of the View, Appium requires your testIDs to be formatted in the canonical style for resource IDs: <package>:id/<identifier>.

In our app, we do the following for our test IDs:

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

If you're using the wd library to talk to appium, you can then do:

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

Try using the below testID for your components:

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

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

This question was hard for me too. But the response is:

Use test:id/ in front of your ID, like this

configure testID

And later, use that test:id/identifier for select the element into the test.

enter image description here

I have been working on solved this since yesterday. So, please, follow me in https://www.linkedin.com/in/binni-cordova-a77000175/ and buy me a coffee

user_102943170
Related