How to Add the TestID to IOS App
https://dev.to/nextlevelbeard/an-end-to-the-abuse-of-accessibility-ids-5d2j
The solution here is to make sure not just to use the testID attribute on important components, but also to set the accessibilityLabel attribute, to ensure that the element is always findable via Appium's 'accessibility id' locator strategy. (Actually, this is only a problem on Android, because on Android, React Native puts the testID into something called a 'view tag', which is not accessible to Appium at all.
I like to make a convenience function called testProps to make this process easy:
export function testProps (id) {
return {testID: id, accessibilityLabel: id};
}
Now I can just use this function everywhere instead of testID:
<Component {...testProps('foo')} />
Another tactic for dealing with this issue, if we don't want to add labels and IDs to lots of components, is to make sure that parent components have their accessible attribute set to false; this allows the accessibility visibility of children to bubble up through a parent, rather than treating the parent component as a monolithic component from the perspective of the accessibility system.
There is a lot written stating that if it’s implemented correctly, it’s available in Appium
See here
https://dev.to/nextlevelbeard/an-end-to-the-abuse-of-accessibility-ids-5d2j
States that works w iOS and Android
If it's not working make sure of two things:
-
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 defaultaccessible
value forTouchable
components istrue
.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]
andappium: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.It seems the best way to guarantee everything works is to prefix the package name to the testIDs, it's a good practice for Android development after all. Let's add a helper function to our React Native app called getTestID or tID for short!
import { Platform } from 'react-native';
import { getBundleId } from 'react-native-device-info';
const appIdentifier = getBundleId();
export function getTestID(testID) {
if (!testID) {
return undefined;
}
const prefix = `${appIdentifier}:id/`;
const hasPrefix = testID.startsWith(prefix);
return Platform.select({
android: !hasPrefix ? `${prefix}${testID}` : testID,
ios: hasPrefix ? testID.slice(prefix.length) : testID,
});
}
export const tID = getTestID;
In Appium Inspector need to add 2 extra capabilities to identifies the accessibility ID
"appium:settings[snapshotMaxDepth]": 60, "appium:settings[customSnapshotTimeout]": 100