React Native 应用程序的自动化

要为 Reach Native 应用程序构建自动化，您可以使用适用于 iOS 的 React Native 演示应用程序来了解如何使特定组件实现自动化。

先决条件

• UiPath.MobileAutomation.Activities。或者，您可以使用“移动测试项目”默认模板，因为这会为您安装活动包。
• 设备场或实体移动设备（请参阅管理设备）。
• Appium 端点。

准备环境

在此示例中，“可触摸不透明度”组件用于自动化基于触摸的输入。 您可以将其他视图设置为可访问，因为其行为与“可触摸不透明度”组件类似。

1. 下载 适用于 iOS 的 React Native 演示应用程序。
2. 使用适用于 iOS 的 React Native 演示应用程序，在移动设备管理器中配置 iOS 应用程序。
3. 在移动设备管理器中启动应用程序。
4. 使用设备模拟器旁边的交互栏来录制操作，以便直接在 Studio 中进行导入（请参阅导入录制的操作）。
   
   

   

   
   

Building automation for React Native apps

在此示例中，我们使用适用于 iOS 的 React Native 演示应用程序来配置特定属性，以使组件可自动化。

辅助功能属性

将此属性设置为true表示视图为可访问性元素。 将“辅助功能”设置为 true 可使元素可自动化。 默认情况下，所有可触摸组件都可访问（请参阅 React Native 可访问性）。

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

属性	类型	描述
accessible	Bool	`{true
testID	字符串	'any text'将此组件与其父组件取消组合，使其可单独自动化。 使组件可自动化，尽管其父级可访问性状态（true 或 false）。 not mentioned组件将根据其父级可访问性状态进行相应处理

移动自动化示例

根据您的要求，使用以下移动自动化示例作为构建自动化的起点。或者，您可以使用移动设备管理器记录步骤，然后将其导入到 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;