Automação para aplicativos React Native

Para criar automações para aplicativos Reach Native, você pode usar o React Native Demo App para iOS para aprender como tornar componentes específicos automatizáveis.

Pré-requisitos

• UiPath.MobileAutomation.Activities. Ou então, você pode usar o modelo padrão Projeto de testes móveis, pois ele instalará o pacote de atividades para você.
• Fazenda de dispositivos ou Dispositivo móvel físico (consulte Gerenciamento de dispositivos).
• Endpoint do Appium.

Preparar o ambiente

Para este exemplo, o componente TouchableOpacity está sendo usado para automatizar a entrada baseada em toque. Você pode definir outras exibições tão acessíveis quanto o comportamento será semelhante ao componente TouchableOpacity.

1. Baixe o aplicativo React Native Demo para iOS.
2. Configure um aplicativo iOS no Mobile Device Manager usando o Aplicativo React Nativo de demonstração para iOS.
3. Inicie o aplicativo no Mobile Device Manager.

4. Use a barra de interação ao lado do emulador de dispositivo para registrar a ação para que você possa importá-las diretamente no Studio (consulte Importar ações gravadas).

   
   

   

   
   

Building automation for React Native apps

Neste exemplo, usamos o React Native Demo App para iOS para configurar propriedades específicas para tornar os componentes automatizáveis.

Propriedades de acessibilidade

Definir esta propriedade como true indica a exibição como um elemento de acessibilidade. Acessibilidade definida como true torna um elemento automatizável. Todos os componentes palpáveis são acessíveis por padrão (consulte React Native Accessibility).

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

Propriedade	Tipo	Description
accessible	Bool	`{verdadeiro
testID	String	'any text' Desagrupa este componente de seu pai tornando-o individualmente automatizável. Torna o componente automatizável apesar de seu status de acessibilidade pai (verdadeiro ou falso). not mentioned O componente é tratado de acordo com seu status de acessibilidade pai

Exemplo de automação móvel

Use a seguinte amostra de automação móvel como ponto de partida para construir a automação de acordo com suas necessidades. Alternativamente, você pode usar Mobile Device Manager para registrar as etapas e depois importá-las para o 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;