React Native アプリのオートメーション

React Native アプリのオートメーションを構築するために、iOS 用の React Native デモ アプリを使用して特定のコンポーネントを自動化可能にする方法を習得できます。

前提条件

• UiPath.MobileAutomation.Activities が必要です。または、既定のテンプレート「モバイル テスト プロジェクト」を使用することもできます。この方法では、アクティビティ パッケージが自動的にインストールされます。
• デバイス ファームまたは物理モバイル デバイス (「デバイスを管理する」を参照)。
• Appium のエンドポイント。

環境を準備する

この例では、TouchableOpacity コンポーネントを使用してタッチベースの入力を自動化します。他のビューの場合も、挙動が TouchableOpacity コンポーネントに似ているため、アクセス可能に設定できます。

1. iOS 用の React Native デモ アプリをダウンロードします。
2. iOS 用の React Native デモ アプリを使用して、モバイル デバイス マネージャーで iOS アプリケーションを設定します。
3. モバイル デバイス マネージャーでアプリケーションを起動します。
4. デバイス エミュレーターのすぐ横にあるインタラクション バーを使用してアクションを記録し、Studio に直接インポートできるようにします (「記録されたアクションをインポートする」を参照)。
   
   

   

   
   

React Native アプリのオートメーションを構築する

この例では、iOS 用の React Native デモ アプリを使用し、特定のプロパティを設定してコンポーネントを自動化可能にします。

アクセシビリティのプロパティ

このプロパティを true に設定すると、ビューがアクセシビリティ要素として指定されます。アクセシビリティを true に設定すると、要素が自動化可能になります。タッチ可能なすべてのコンポーネントは、既定でアクセス可能な状態になっています (「React Native のアクセシビリティ」を参照)。

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

プロパティ	入力	説明
accessible	Bool	`{true
testID	string	'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;