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 Standardvorlage für das Mobile Testing-Projekt verwenden, da dadurch das Aktivitätspaket für Sie installiert wird.
• Gerätefarm oder physisches Mobilgerät (siehe Verwalten von Geräten).
• Appium-Endpunkt.

Umgebung vorbereiten

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 iOSherunter.
2. Konfigurieren Sie eine iOS-Anwendung im Mobile Device Manager mit 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, damit Sie sie direkt in Studio importieren können (siehe Aufgezeichnete Aktionenimportieren ).

   
   

   

   
   

Building automation for 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

Das Festlegen dieser Eigenschaft auf true gibt die Ansicht als Barrierefreiheitselement an. Accessibility, die auf „true“ festgelegt ist, macht ein Element automatisierbar. Alle anfassbaren Komponenten sind standardmäßig zugänglich (siehe React Native Accessibility).

<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 mobile Automatisierungsbeispiel als Ausgangspunkt für die Erstellung der Automatisierung gemäß Ihren Anforderungen. Alternativ können Sie den Mobile Device Manager verwenden, um Schritte aufzuzeichnen und sie dann in Studio zu 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;