Automatisation pour les applications React Native

Pour créer des automatisations pour les applications Reach Native, vous pouvez utiliser l'application React Native Demo pour iOS pour apprendre à automatiser des composants spécifiques.

Prérequis

• UiPath.MobileAutomation.Activities. Vous pouvez également utiliser le modèle par défaut du projet de test mobile, car cela installera le package d'activités pour vous.
• Parc d'appareils ou Appareil mobile physique (voir Gestion des appareils).
• Point de terminaison d'Appium.

Préparer l’environnement

Pour cet exemple, le composant TouchableOpacity est utilisé pour automatiser la saisie tactile. Vous pouvez définir d'autres vues comme accessibles, car le comportement sera similaire avec le composant TouchableOpacity.

1. Téléchargez l' application React Native Demo pour iOS.
2. Configurez une application iOS dans le gestionnaire d'appareils mobiles à l'aide de l'application React Native Demo pour iOS.
3. Démarrez une application dans le gestionnaire d'appareils mobiles.
4. Utilisez la barre d'interaction juste à côté de l'émulateur d'appareil pour enregistrer l'action afin de pouvoir les importer directement dans Studio (voir Importer des actions enregistrées).
   
   

   

   
   

Building automation for React Native apps

Dans cet exemple, nous utilisons l'application React Native Demo pour iOS pour configurer des propriétés spécifiques afin de rendre les composants automatisables.

Propriétés d'accessibilité

La définition de cette propriété sur true indique que la vue est un élément d'accessibilité. L'accessibilité définie sur true rend un élément automatisable. Tous les composants tactiles sont accessibles par défaut (voir React Native Accessibility).

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

Propriété	Saisie de texte	Description
accessible	Bool	`{vrai
testID	string	'any text' Dissocie ce composant de son parent, ce qui le rend individuellement automatisable. Rend le composant automatisable malgré son statut d'accessibilité parent (vrai ou faux). not mentioned Le composant est traité en fonction de son statut d'accessibilité parent

Exemple d’automatisation mobile

Utilisez l'exemple d'automatisation mobile suivant comme point de départ pour créer l'automatisation en fonction de vos besoins. Vous pouvez également utiliser le gestionnaire d'appareils mobiles pour enregistrer les étapes, puis les importer dans 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;