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.
Related
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
I'm facing an issue on TextInput's contextMenuHidden on Android, IOS works well not showing the context menu though.
<TextInput style={styles.input} contextMenuHidden={true} />
I did tried the view component solution:
removeClippedSubviews={true}
However, the behaviour came back, after I delete the whole text input -> retype the text -> double tap (shows back context menu)
Not sure if anyone experienced this before, but need some advice/suggestion for Android case, must I create a custom native ui component instead?
I'm working on a test automation project with Appium for the react-native mobile app, so I need accessibilityLabel for every element in each app's page, but our developer team says that adding accessibilityLabel for every element reduces performance, I want to know that is it true or not?
I do not see any mention in the official site (https://facebook.github.io/react-native/docs/accessibility) that this impact performance. Basically it is just turning "on" the accessible as true.
<TouchableOpacity
accessible={true}
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen"
onPress={this._onPress}
>
<View style={styles.button}>
<Text style={styles.buttonText}>Back</Text>
</View>
</TouchableOpacity>
If that is the concern of your team, one way 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.
<FlatList
data={this.state.data}
keyExtractor={(x, i) => i.toString()}
console.log('Hi from React Native')
renderItem={({ item }) =>
<Text>
{`${item.name.first} ${item.name.last}`}
</Text>
}
/>
That's my function example of where I'm doing a console.log, but there's nothing showing up in the "Debug Console" of VSCode. I know everything is running and the component likely did mount as I am able to view my app on the Expo client app on my device. I am getting an error saying 'identified expected'.
I'm also not sure what a keyExtractor is doing here.
First off, you cannot use a console.log statement there, FlatList expects a list of props in that place. You may place your log statement in JavaScript code block.
Secondly, to use VSCode's debugger, you have to attach it to your packager first. Have you done that? You'll need a relevant VSCode extension. There's some help available here and here on how to do that; it's a separate issue. You can simply use Google Chrome as an alternative by enabling JS debugging from your app. (In your app, open the developer menu, then tap Debug JS Remotely. Then in the Google Chrome window that opens, right click > Inspect > Console).
Finally, renderItem is a FlatList prop which renders each individual item in your list. You can use to style or modify each item of your FlatList.
Blow screenshot is from react-native UIExplorer example. I want to animate list rows adding/removing when data source changed - for example, when entering a keyword in the search box.
Thanks a lot.
Try out LayoutAnimation:
LayoutAnimation.easeInEaseOut();
this.setState({...});
There are good implementations of react-native refresh components which have animations as a part of it.
One of them is- react-native-refresher
I have used this in my projects. It's a great library.
Installation:
npm install react-native-refresher --save
Usage(check github link for more detailed code):
<RefresherListView
dataSource={this.state.dataSource}
onRefresh={this.onRefresh.bind(this)}
indicator={<LoadingBarIndicator />}
renderRow={(rowData) => <View style={{padding:10,borderBottomColor: '#CCCCCC', backgroundColor: 'white',borderBottomWidth: 1}}><Text>{rowData}</Text></View>}
/>
Also for more details you can have a look at Animations docs by React Native.