- Introducción a Test Suite
- Studio
- Información general
- Actividades de prueba
- Orchestrator
- Testing Robots
- Test Manager
- Integraciones de CI/CD
Automatización para aplicaciones React Native
Para crear automatizaciones para aplicaciones Reach Native, puedes usar la aplicación React Native Demo para iOS para aprender a automatizar componentes específicos.
- UiPath.MobileAutomation.Activities. Como alternativa, puedes utilizar la plantilla predeterminada del Proyecto de pruebas móviles, ya que instalará el paquete de actividades por ti.
- Granja de dispositivos o Dispositivo móvil físico (consulta Gestionar dispositivos).
- Terminal de Appium.
En este ejemplo, el componente TouchOpacidad se utiliza para automatizar la entrada basada en toque. Puede establecer otras vistas tan accesibles como será el comportamiento similar con el componente TouchOpacidad.
En este ejemplo, usamos la aplicación React Native Demo para iOS para configurar propiedades específicas y hacer que los componentes se puedan automatizar.
true
indica la vista como un elemento de accesibilidad. La accesibilidad establecida en verdadero hace que un elemento se pueda automatizar. Todos los componentes sensibles son accesibles por defecto (ver Accesibilidad de 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>
Propiedad |
Tipo |
Descripción |
---|---|---|
|
Booleano |
|
|
String |
Hace que el componente se pueda automatizar a pesar de su estado de accesibilidad principal (verdadero o falso).
|
Utiliza la siguiente muestra de automatización móvil como punto de partida para crear la automatización según tus requisitos.Como alternativa, puedes utilizar Mobile Device Manager para grabar los pasos y luego importarlos a 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;