I'm trying to automatize an react-native app using Appium, but i need accessibility id to identify elements. I've tried with the following code but still not showing accesibilty id.
`
<TouchableOpacity
activeOpacity={opacity}
onPress={onPress}
disabled={disabled}
accessible={true}
accessibilityLabel="Ingresar a mi cuenta"
testID="loginAccount"
>
`
I managed to modify the xpath of the Tab screen with attributes:
tabBarTestID: 'Inicio', tabBarAccessibilityLabel: 'inicioLabel'
Also i want to know if it works in custom components.
I've tried adding testId, accesible and testID, but still not showing accesibiltyID
This question has been asked before but it seems like all answers I find deal with class-based components.
I have a component with an onPress handler function as follows:
<Text id="someId" onPress={(e) => console.log(e)}>
Some Text
</Text>
I need to get 'someId' logged out consistently. Currently, I can only get it via:
console.log(e.target._internalFiberInstanceHandleDEV.memoizedProps.id)
This doesn't feel right. Is this the official way of getting the id, or are there different ways? The ones I can find use 'this' which seems to be undefined in functional components.
I have an application created by react-native which contains a modal raise from bottom. Now I'm tring to use appium to automate the application and in android it works fine. While in iOS, when I try to use appium inspector on the modal, it just get penetrated and return control below.
<Modal style={styles.bottomModal} isVisible={btmModal} backdropOpacity={0.3} onBackdropPress={this._closeBtmModal}>
<View style={styles.ways}>
<TouchableOpacity accessibilityLabel={IDS.MANUAL_NAV_CAMERA} testID={IDS.MANUAL_NAV_CAMERA} style={styles.line} onPress={() => this._navCamera()}>
<Image style={styles.scan} source={require('../../../resources/images/scan.png')} /><Text style={styles.lineTxt}>扫码绑定</Text>
</TouchableOpacity>
<TouchableOpacity accessible={true} accessibilityLabel={IDS.MANUAL_ADD_TEXT} testid={IDS.MANUAL_ADD_TEXT} style={styles.line} onPress={this._navManualBindMfa}>
<Text style={styles.lineTxt}>手动输入</Text>
</TouchableOpacity>
<TouchableOpacity accessible={true} accessibilityLabel={IDS.MANUAL_ADD_MODAL_CANCEL} testId={IDS.MANUAL_ADD_MODAL_CANCEL} style={[styles.line, styles.cancelline]} onPress={this._closeBtmModal}>
<Text style={styles.cancelTxt}>取消</Text>
</TouchableOpacity>
</View>
</Modal>
Try to get appium inspector working against this modal. Thanks for any suggestion in advance.
Possible strategies to try:
"setting accessible={false} on outer most layer makes child views accessible."
See https://github.com/appium/appium/issues/6517#issuecomment-298037046
If your modal has a transparent background the components behind may will still be marked as visible. I use an environment variable set in the build for testing with appium which removes the transparency option. This does mean that the build being tested is not identical to the normal build
React-Native 0.63
Desktop Appium 1.22.0
Appium Inspector 2022.1.2
In our project the obstacle was the element Pressable. Setting property accessible={false} to it fixed an ability for Appium to find elements on modal windows as well. <TouchableOpacity accessible={false}> also plays role for finding elements on screens.
I have to highlight that Appium Inspector's screenshot view still won't recognize elements, but its searching functionality ('id' for iOS) finds them.
Up until now, I was under the impression that if Appium Inspector does not render a component then it means it does not see it, therefore I won't be able to use it in tests.
As it turns out, its searching engine can still find such a component, and therefore we can use it in tests, although sometimes it requires adding additional props to certain components, like accessible={false} or a testID to a parent component.
I have a quick question about the user's long press action that hits the specific word and shows the meaning of words by requesting api to a dictionary service.
The below is the current way the app renders the components. Because the app has to load many words at the same time, I was not able to wrap all words with each because it drastically slows down the app.
I want This Wordthis word to be reactive to long press.
<View>
<Text>I want <Text>This Word</Text>this word to be reactive to long press.</Text>
</View>
<View>
<Text>I want <Text>This Word</Text>this word to be reactive to long press.</Text>
</View>
We can't not destroy the current form of the rendering. But if there is a way to destroy it temporarily and recover it after query (dictionary api), then that will be also fascinating.
Please share any ideas with me please!
I have come across a couple of react-native third party modules that don't pass on the props accessibilityLabel and testID to the underlying components e.g. <Text /> and <View />. While it is completely up to the module author to implement this it makes it much harder to test apps using these components as test frameworks like Appium for example rely on these IDs to be set in order to be able to uniquely identify a component. (Okay there's XPath but that is not a great option)
How should this be addressed? I can think of the following options
Let react-native handle it automatically
Include a note in the docs to remind authors that this is important
Have react-native display a warning if the props are not being passed on
Posting here since their Github page seems flooded and this doesn't need to be tracked as an issue yet. Would love to see some opinions.