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
Related
I am wanting to implement a download receipt functionality. I am tyring to use capture Ref because I want to generate a image of receipt that user can download. To generate the image from JSX or html in react native/expo, I use capture Ref. I can only do this with view rendering because this function requires a React component.
https://docs.expo.dev/versions/latest/sdk/captureRef/
but I cannot do this without display the UI to user. What I want to do is, stay on the page, click download button, and have the image downloaded that I can custom create and not show it to the user. But, I cannot quite find a way to just create a image from JSX with content I want in receipt and not show to user. Basically, I want this whole process to happen in background and download to be success.
You can set the content away from the screen with absolute positioning:
<View style={{position: 'absolute', left: Dimensions.get('screen').width}}>
<ViewShot
onCapture={onCapture}
width={width}
height={height}
>
<Text>This will show on the image</Text>
</ViewShot>
</View>
The lib also provides an example for offscreen rendering
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 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.
<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.
Im trying to change the back button for the NavigationHeader.BackButton but I don't see any way that is possible.
The header is rendered using the following...
_renderHeader(props,backAction){
return (
<NavigationHeader
{...props}
renderLeftComponent={props => this._renderLeftComponent(props,backAction)}
/>
)
}
_renderLeftComponent(props,backAction){
return (
<NavigationHeader.BackButton
onPress={backAction}
onNavigate={backAction}
/>
);
}
I have tried setting tintColor and color style but it doesn't work. I looked at the source code, but I don't see any way this can be done. Is there a way to either set the tint/color or to provide my own image?
I am using react-native-vector-icons which allows you to choose from several different collections, including Google's Material icons. The library provides you with an Icon component that you can integrate with several existing components, including TabBarIOS, NavigatorIOS, Navigator.NavigationBar, ToolbarAndroid, etc.
In addition it provides Icon.Button a convenient way of creating a button with a left icon, and of course you can simply use the Icon inline like this:
<Icon name='arrow-back' size={24} color={#900}/>
They have a pretty good documentation on their Github repo, have a look.