DEV Community

An end to the abuse of Accessibility IDs

Ricardo Barbosa on March 15, 2021

As of React Native 0.64, we can and should change the standard way of specifying the attributes used for test automation purposes with Appium. Sin...
Read full post
Collapse
 
hdesaidave profile image
hdesai-dave • • Edited

Hi i am able to find element with xpath but not id for an element where i added testID using webdriverio.

selector = $(//*[@resource-id="bank"]); works

selector = $(id:bank); doesn't work

The way you suggested in post

selector = $(id=bank) also doesn't work.

Collapse
 
nextlevelbeard profile image
Ricardo Barbosa •

It seems it's a problem with Appium, it modifies your selector and adds the package name automatically on Android. In short, finding the element fails because you didn't specify the package name in the testID of your app. I've updated the article with some more info and a technical solution, hope it helps!

Collapse
 
hdesaidave profile image
hdesai-dave •

Thanks man this worked but wondering why would react native not implement this in the framework themselves?

Collapse
 
retyui profile image
Davyd NRB •

Hack with accessibilityLabel instead of testID on Android is not actual since react-native@0.65.x !!!

See changelog: github.com/react-native-community/... ;

Commit: github.com/facebook/react-native/c... ;

Collapse
 
nextlevelbeard profile image
Ricardo Barbosa •

Seems it's just a case of the changelog not being correctly generated.
I believe testID is available since 0.64.

Collapse
 
jaysonder profile image
Jay Patel •

In my case, I was not able to find appPackage from browser.capabilities. Instead of using app package, we can use test id=test as prefix to make it work which works for me.

We can create prefix like this:

export const prefix = (selector: string) => {
if (driver.isAndroid) {
return id=test:id/${selector};
}

return ~${selector};
};

Collapse
 
cakasuma profile image
Mustofa Ghaleb Amami •

we are using testproject (appium) based, and it cannot detect id on IOS even though ive added testID to the element, the catch is , this is only happening on item inside list (flatlist), label becoming the text instead of testID

Collapse
 
kps250 profile image
Kiran Shinde •

It works good on iOS. For Android with testID, resource-id gets set for Views, Text, Buttons but not for elements like TextInput etc. So need to use accessibilityLabel in React Native for accessibility id on Appium side

Collapse
 
oksanahanailiuk profile image
Oksana Hanailiuk •

Hey, I have an issue with TestID for Android. TestID assigned to TextInput control not working.
Any suggestions how to fix it?

I will be very grateful for your helpю Thanks

github.com/facebook/react-native/i...

Collapse
 
vitalyiegorov profile image
Vitaly Iegorov • • Edited

Does this work for "Text" elements on IOS? In our case Appium does not see Text testID="..."

Collapse
 
nextlevelbeard profile image
Ricardo Barbosa • • Edited

That should indeed be the case yes, for whatever React Native version.
If it's not working make sure of two things:

  1. If any parent of the React Native Text component is a Touchable (TouchableOpacity for example) then you need to make sure to add accessible={false} to this parent component in order for you to be able to see this component's children like the Text. This happens because the default accessible value for Touchable components is true.
  2. You might have a very detailed screen with lots of elements and Appium at one point just gives up going down the tree and does not show every element. To avoid this, use Appium's Settings API by adding the capabilities appium:settings[snapshotMaxDepth] and appium:settings[customSnapshotTimeout] to your tests. Increase their default values to have more elements appear when finding strategies. Have a look here for the default values.
Collapse
 
coderpillar profile image
coderpillar •

Does anyone know how this approach affects performance of the react native application? Or how to measure that?