test-suite
2024.10
true
React Native 应用程序的自动化
![](https://docs.uipath.com/_next/static/media/grid.05ebd128.png?w=3840&%3Bq=100)
预览
Test Suite 用户指南
Last updated 2024年7月15日
React Native 应用程序的自动化
要为 Reach Native 应用程序构建自动化,您可以使用适用于 iOS 的 React Native 演示应用程序来了解如何使特定组件实现自动化。
- UiPath.MobileAutomation.Activities。或者,您可以使用“移动测试项目”默认模板,因为这会为您安装活动包。
- 设备场或实体移动设备(请参阅管理设备)。
- Appium 端点。
在此示例中,我们使用适用于 iOS 的 React Native 演示应用程序来配置特定属性,以使组件可自动化。
将此属性设置为
true
表示视图为可访问性元素。 将“辅助功能”设置为 true 可使元素可自动化。 默认情况下,所有可触摸组件都可访问(请参阅 React Native 可访问性)。
<View accessible={true}>
<Text>text one</Text>
<Text>text two</Text>
</View>
<View accessible={true}>
<Text>text one</Text>
<Text>text two</Text>
</View>
属性 |
类型 |
描述 |
---|---|---|
|
Bool |
|
|
字符串 |
使组件可自动化,尽管其父级可访问性状态(true 或 false)。
|
根据您的要求,使用以下移动自动化示例作为构建自动化的起点。或者,您可以使用移动设备管理器记录步骤,然后将其导入到 Studio 中。
import React from 'react';
import type { Node } from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
Alert,
useColorScheme,
View,
TouchableOpacity,
Button
} from 'react-native';
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import symbolicateStackTrace from 'react-native/Libraries/Core/Devtools/symbolicateStackTrace';
const App: () => Node = () => {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
const click = () => {
Alert.alert("click!! ")
}
return (
<View style={styles.container}>
<TouchableOpacity style={styles.top} accessible={true}>
<View>
<Text accessible={true} style={[styles.text1, backgroundColor = "lightblue"]}>Touchable opacity(TO) accessible = true</Text>
<Text accessible={true} style={[styles.text1, backgroundColor = "lightblue"]}>Accessible true on TO groups all elements within TO</Text>
</View>
<View >
<Text accessible={true} style={styles.text2} onPress={click}>Accessible true text in view</Text>
</View>
<Button accessible={true} color="white" title='Button accessible true' onPress={click}></Button>
</TouchableOpacity>
<TouchableOpacity style={styles.middle} accessible={true}>
<View>
<Text style={styles.text1}>Touchable opacity </Text>
<Text style={styles.text1}>accessible = true</Text>
<Text style={styles.text1}>Despite accessible true on TO, testID ungroups all elements within and makes them automatable</Text>
</View>
<Text testID='text1' style={styles.text2} onPress={click}>Text with testID</Text>
<Text style={styles.text2} onPress={click}>Text without testID</Text>
<View testID='view1'>
<Text style={styles.text2} onPress={click}>Text in a view with testID</Text>
<Text style={styles.text2} onPress={click}>Second text in a view with testID</Text>
</View>
<Button testID='button1' accessible={true} title='Button with testID' onPress={click}></Button>
</TouchableOpacity>
<TouchableOpacity style={styles.bottom} accessible={false}>
<View>
<Text style={styles.text1}>Touchable opacity </Text>
<Text style={styles.text1}>accessible = false</Text>
<Text style={styles.text1}>Setting accessible false ungroups all elements contained by TO</Text>
</View>
<View >
<Text style={styles.text2} onPress={click}>Text without accessible mentioned</Text>
</View>
<Button title='Button without accessible mentioned' onPress={click}></Button>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
backgroundColor: "#fff",
padding: 20,
margin: 20,
},
top: {
flex: 0.2,
backgroundColor: "grey",
borderWidth: 5,
borderRadius: 20,
justifyContent: "center",
alignContent: "center"
},
middle: {
flex: 0.4,
backgroundColor: "beige",
borderWidth: 5,
justifyContent: "center",
alignContent: "center"
},
bottom: {
flex: 0.3,
backgroundColor: "pink",
borderWidth: 5,
borderRadius: 20,
justifyContent: "center",
alignContent: "center"
},
text1: {
alignContent: "center",
textAlign: "center"
},
text2: {
margin: 10,
backgroundColor: "lightblue",
padding: 1,
borderWidth: 2,
},
button: {
color: "white",
backgroundColor: "pink"
}
});
export default App;
import React from 'react';
import type { Node } from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
Alert,
useColorScheme,
View,
TouchableOpacity,
Button
} from 'react-native';
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import symbolicateStackTrace from 'react-native/Libraries/Core/Devtools/symbolicateStackTrace';
const App: () => Node = () => {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
const click = () => {
Alert.alert("click!! ")
}
return (
<View style={styles.container}>
<TouchableOpacity style={styles.top} accessible={true}>
<View>
<Text accessible={true} style={[styles.text1, backgroundColor = "lightblue"]}>Touchable opacity(TO) accessible = true</Text>
<Text accessible={true} style={[styles.text1, backgroundColor = "lightblue"]}>Accessible true on TO groups all elements within TO</Text>
</View>
<View >
<Text accessible={true} style={styles.text2} onPress={click}>Accessible true text in view</Text>
</View>
<Button accessible={true} color="white" title='Button accessible true' onPress={click}></Button>
</TouchableOpacity>
<TouchableOpacity style={styles.middle} accessible={true}>
<View>
<Text style={styles.text1}>Touchable opacity </Text>
<Text style={styles.text1}>accessible = true</Text>
<Text style={styles.text1}>Despite accessible true on TO, testID ungroups all elements within and makes them automatable</Text>
</View>
<Text testID='text1' style={styles.text2} onPress={click}>Text with testID</Text>
<Text style={styles.text2} onPress={click}>Text without testID</Text>
<View testID='view1'>
<Text style={styles.text2} onPress={click}>Text in a view with testID</Text>
<Text style={styles.text2} onPress={click}>Second text in a view with testID</Text>
</View>
<Button testID='button1' accessible={true} title='Button with testID' onPress={click}></Button>
</TouchableOpacity>
<TouchableOpacity style={styles.bottom} accessible={false}>
<View>
<Text style={styles.text1}>Touchable opacity </Text>
<Text style={styles.text1}>accessible = false</Text>
<Text style={styles.text1}>Setting accessible false ungroups all elements contained by TO</Text>
</View>
<View >
<Text style={styles.text2} onPress={click}>Text without accessible mentioned</Text>
</View>
<Button title='Button without accessible mentioned' onPress={click}></Button>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
backgroundColor: "#fff",
padding: 20,
margin: 20,
},
top: {
flex: 0.2,
backgroundColor: "grey",
borderWidth: 5,
borderRadius: 20,
justifyContent: "center",
alignContent: "center"
},
middle: {
flex: 0.4,
backgroundColor: "beige",
borderWidth: 5,
justifyContent: "center",
alignContent: "center"
},
bottom: {
flex: 0.3,
backgroundColor: "pink",
borderWidth: 5,
borderRadius: 20,
justifyContent: "center",
alignContent: "center"
},
text1: {
alignContent: "center",
textAlign: "center"
},
text2: {
margin: 10,
backgroundColor: "lightblue",
padding: 1,
borderWidth: 2,
},
button: {
color: "white",
backgroundColor: "pink"
}
});
export default App;