Automatización para aplicaciones React Native

Para crear automatizaciones para aplicaciones Reach Native, puedes utilizar la aplicación de demostración React Native para iOS para aprender a preparar componentes específicos para automatizar.

Requisitos previos

• UiPath.MobileAutomation.ActivitiesComo 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.

Prepara el entorno

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.

1. Descarga la aplicación de demostración React Native para iOS.

2. Configura una aplicación iOS en Mobile Device Manager utilizando la aplicación React Native Demo para iOS.

3. Inicia la aplicación en Mobile Device Manager.

4. Utiliza la barra de interacción junto al emulador de dispositivo para grabar la acción y poder importarla directamente en Studio (consulta Importar acciones grabadas).

   

Building automation for React Native apps

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.

Propiedades de accesibilidad

Establecer esta propiedad en true indica la vista como un elemento de accesibilidad. La accesibilidad establecida en verdadero hace que un elemento sea automatizable. Todos los componentes táctiles son accesibles de forma predeterminada (consulta Accesibilidad de React Native).

<View accessible={true}>
  <Text>text one</Text>
  <Text>text two</Text>
</View>

Propiedad	Tipo	Descripción
accessible	Booleano	Verdadero
testID	String	'any text' Desagrupa este componente de su elemento principal para que se pueda automatizar de forma individual. Hace que el componente se pueda automatizar a pesar de su estado de accesibilidad principal (verdadero o falso). El componentenot mentioned se trata de acuerdo con su estado de accesibilidad principal

Muestra de automatización móvil

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 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;