E2E:使用Wix Detox从UIImagePickerController中选择一个图像
描述
我需要编写一个e2e测试,在某些方面它必须在UIImagePickerController中选择一个图像,我试图使用element(by.type('UIImagePickerController')). tapAtPoint()
element(by.type('UIImagePickerController')). tapAtPoint()
没有用。 我需要一种方法来选择图像。 我找到了一种方法来进行原生测试。
同样,模拟对我来说不是一个选项,因为我使用的是更高版本的一个react-native-repackeger需要。
重现步骤
-
与任何使用图像选择器的应用程序一起使用
-
尝试使用
element(by.type('UIImagePickerController')).tapAtPoint({ x: 50, y: 200 })
排毒,节点,设备,Xcode和macOS版本
- 排毒:6.0.2
- 节点:8.9.0
- 设备:iOS模拟器6s
- Xcode:9.2
- macOS:10.13.1
- React-Native:0.46.4
设备和详细的排毒日志
没有日志,设备点击正确的位置,但水龙头没有生效。
不确定这是否相关,但对于iOS 11,我甚至无法在Debug View Hierarchy中看到这些本机视图类型。
但是对于iOS 9和10 ,我会解决这个问题:
it('select first image from camera roll', async () => { // select a photo await element(by.id('select_photo')).tap(); // Choose from Library... await element(by.traits(['button']).and(by.type('_UIAlertControllerActionView'))).atIndex(1).tap(); // select Cemara Roll, use index 0 for Moments await element(by.type('UITableViewCellContentView')).atIndex(1).tap(); // select first image await element(by.type('PUPhotoView')).atIndex(0).tap(); });
使用不同的本机视图类型和可访问性特征可能还有许多其他可能性来解决此问题。
我只是使用react-native-image-picker提供的示例来测试上面的代码:
import React from 'react'; import { AppRegistry, StyleSheet, Text, View, PixelRatio, TouchableOpacity, Image, } from 'react-native'; import ImagePicker from 'react-native-image-picker'; export default class App extends React.Component { state = { avatarSource: null, videoSource: null }; selectPhotoTapped() { const options = { quality: 1.0, maxWidth: 500, maxHeight: 500, storageOptions: { skipBackup: true } }; ImagePicker.showImagePicker(options, (response) => { console.log('Response = ', response); if (response.didCancel) { console.log('User cancelled photo picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error); } else if (response.customButton) { console.log('User tapped custom button: ', response.customButton); } else { let source = { uri: response.uri }; // You can also display the image using data: // let source = { uri: 'data:image/jpeg;base64,' + response.data }; this.setState({ avatarSource: source }); } }); } selectVideoTapped() { const options = { title: 'Video Picker', takePhotoButtonTitle: 'Take Video...', mediaType: 'video', videoQuality: 'medium' }; ImagePicker.showImagePicker(options, (response) => { console.log('Response = ', response); if (response.didCancel) { console.log('User cancelled video picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error); } else if (response.customButton) { console.log('User tapped custom button: ', response.customButton); } else { this.setState({ videoSource: response.uri }); } }); } render() { return ( { this.state.avatarSource === null ? Select a Photo : } Select a Video { this.state.videoSource && {this.state.videoSource} } ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF' }, avatarContainer: { borderColor: '#9B9B9B', borderWidth: 1 / PixelRatio.get(), justifyContent: 'center', alignItems: 'center' }, avatar: { borderRadius: 75, width: 150, height: 150 } }); AppRegistry.registerComponent('example', () => App);