Automatisierung für React Native Apps

Um Automatisierungen für Reach Native-Apps zu erstellen, können Sie die React Native Demo-App für iOS verwenden, um zu erfahren, wie bestimmte Komponenten automatisierbar gemacht werden.

Voraussetzungen

• UiPath.MobileAutomation.Activities. Alternativ können Sie die Mobile Testing-Projekt-Standardvorlage verwenden, da dadurch das Aktivitätspaket für Sie installiert wird.
• Gerätefarm oder physisches Mobilgerät (siehe Verwalten von Geräten).
• Appium-Endpunkt.

Vorbereiten der Umgebung

In diesem Beispiel wird die Komponente TouchableOpacity verwendet, um berührungsbasierte Eingaben zu automatisieren. Sie können andere Ansichten als barrierefrei festlegen, da das Verhalten bei der TouchableOpacity-Komponente ähnlich ist.

1. Laden Sie die React Native Demo-App für iOS herunter.
2. Konfigurieren Sie eine iOS-Anwendung im Mobile Device Manager mithilfe der React Native Demo-App für iOS.
3. Starten Sie die Anwendung im Mobile Device Manager.
4. Verwenden Sie die Interaktionsleiste direkt neben dem Geräteemulator, um die Aktion aufzuzeichnen, sodass Sie sie direkt in Studio importieren können (siehe Importieren aufgezeichneter Aktionen).
   
   

   

   
   

Erstellen von Automatisierung für React Native Apps

In diesem Beispiel verwenden wir die React Native Demo App für iOS, um bestimmte Eigenschaften zu konfigurieren, um Komponenten automatisierbar zu machen.

Eigenschaften der Barrierefreiheit

Wenn Sie diese Eigenschaft auf true festlegen, wird die Ansicht als Barrierefreiheitselement angegeben. Wenn die Barrierefreiheit auf „true“ gesetzt ist, kann ein Element automatisiert werden. Alle bearbeitbaren Komponenten sind standardmäßig zugänglich (siehe Barrierefreiheit von React Native).

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

Eigenschaften	Typ	Beschreibung
accessible	Bool	`{true
testID	string	'any text' Hebt die Gruppierung dieser Komponente von ihrer übergeordneten Komponente auf, sodass sie einzeln automatisierbar ist. Macht die Komponente trotz ihres übergeordneten Barrierefreiheitsstatus (true oder false) automatisierbar. not mentioned Komponente wird entsprechend ihrem übergeordneten Barrierefreiheitsstatus behandelt

Beispiel für die mobile Automatisierung

Verwenden Sie das folgende Beispiel für eine mobile Automatisierung als Ausgangspunkt zum Erstellen der Automatisierung gemäß Ihren Anforderungen. Alternativ können Sie mit dem Mobile Device Manager Schritte aufzeichnen und sie dann in Studio importieren.

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;