CODEWITHSUNDEEP
androidiosreact-nativeappium
shaveax
shaveax

Reputation: 133

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

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

Upvotes: 5

Views: 13762

Answers (4)

Mohammad Taha Al-Tamimi
Mohammad Taha Al-Tamimi

Reputation: 644

I have faced the issue that the element and IDs do not appear in Appium.

the solution is using replace @react-navigation/stack to @react-navigation/native-stack

for more details: 1-https://github.com/appium/appium/issues/14825#issuecomment-1690850085

2-https://reactnavigation.org/docs/native-stack-navigator/

Upvotes: 0

Binni Zenobio Cordova Leandro
Binni Zenobio Cordova Leandro

Reputation: 94

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

Upvotes: 2

A. Goodale
A. Goodale

Reputation: 1348

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

Upvotes: 9

user3635951
user3635951

Reputation: 59

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>

Upvotes: 5

Related Questions