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).

 
  text one
  text two

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 (
    
      
        
          Touchable opacity(TO) accessible = true
          Accessible true on TO groups all elements within TO
        
        
          Accessible true text in view
        
        
      
      
        
          Touchable opacity 
          accessible = true
          Despite accessible true on TO, testID ungroups all elements within and makes them automatable
        
        Text with testID
        Text without testID
        
          Text in a view with testID
          Second text in a view with testID
        
        
      
      
      
      
          Touchable opacity 
          accessible = false
          Setting accessible false ungroups all elements contained by TO
        
        
          Text without accessible mentioned
        
        
      
    
  );
};
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;