当涉及到构建运用程序时，软件测验是至关重要的。根据信息和软件质量协会最近的一份报告，在2020年，不良的软件质量使美国所有部门的安排丢失超过2.08万亿美元。
作为一个软件开发人员，建立一个坚实的、经过良好测验的运用程序将经过进步用户–和开发人员–的满意度使你从人群中脱颖而出。
因此，让咱们来学习怎么用Appium测验React Native移动运用程序。
前提条件
- 你应该装置有Node.js
- 具有React Native移动运用开发的基本知识将有所帮助
什么是Appium？
Appium是一个跨渠道的自动化测验东西，适用于原生、混合和移动网络运用。它支持iOS、Android和Windows的UI测验。
你问，它是怎么作业的？
Appium有一个客户端-服务器架构。Appium客户端向Appium服务器（一个Node.js HTTP服务器）发送恳求，反过来，Appium服务器向执行动作的设备发送恳求。然后，服务器将成果回来给客户端，让你知道测验的状态。
Appium架构
设置你的React Native运用程序
让咱们设置一个基本的React Native运用，有一个登录屏幕，并测验一些UI元素。
咱们将运用Expo指令行东西来构建和运转咱们即将创立的React Native运用样本。
装置
运转下面的指令，在你的机器上装置Expo CLI。
npm install --global expo-cli
接下来，运转这个指令，为你的React Native运用程序创立一个起点。
expo init my-app # my-app is your app's name. So, you can change it to whatever name you want.
当你运转上述指令时，你会被提示有一些模板选项能够挑选。比方说。
? Choose a template: › - Use arrow-keys. Return to submit.
----- Managed workflow -----
blank a minimal app as clean as an empty canvas
blank (TypeScript) same as blank but with TypeScript configuration
tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
----- Bare workflow -----
❯ minimal bare and minimal, just the essentials to get you started
minimal (TypeScript) same as minimal but with TypeScript configuration
关于本教程，运用箭头键挑选最小装置选项。然后等候装置完结。这应该需求大约一分钟或更长时刻，这取决于你的网络连接强度。
完结后，运转cd my-app 。现在你的运用程序现已预备好了。翻开App.js 文件，以便咱们能够修正它。添加下面的代码用于登录页面。
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
const App = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
return (
<View style={styles.container}>
<Text style={styles.logo}>Login</Text>
<View style={styles.inputView} >
<TextInput
style={styles.inputText}
placeholder="Email..."
placeholderTextColor="#003f5c"
onChangeText={text => setEmail(text)} />
</View>
<View style={styles.inputView} >
<TextInput
secureTextEntry
style={styles.inputText}
placeholder="Password..."
placeholderTextColor="#003f5c"
onChangeText={text => setPassword(text)} />
</View>
<TouchableOpacity>
<Text style={styles.forgot}>Forgot Password?</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.loginBtn}>
<Text style={styles.loginText}>LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.loginText}>Signup</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#003f5c',
alignItems: 'center',
justifyContent: 'center',
},
logo: {
fontWeight: "bold",
fontSize: 50,
color: "#3CB371",
marginBottom: 40
},
inputView: {
width: "80%",
backgroundColor: "#465881",
borderRadius: 25,
height: 50,
marginBottom: 20,
justifyContent: "center",
padding: 20
},
inputText: {
height: 50,
color: "white"
},
forgot: {
color: "white",
fontSize: 11
},
loginBtn: {
width: "80%",
backgroundColor: "#3CB371",
borderRadius: 25,
height: 50,
alignItems: "center",
justifyContent: "center",
marginTop: 40,
marginBottom: 10
},
loginText: {
color: "white"
}
});
export default App;
运转expo start ，挑选你想运转你的运用程序的设备。我将运用iOS 11模拟器（你能够运用你的Android或iOS手机）。假如你运转它，你应该看到这个登录页面。
现在运用程序现已设置好了，但有一点需求注意。由于Appium的元素查找算法与UI无障碍层一同作业，你需求添加一个UI无障碍标签，而不是经过Appium的ID来拜访UI元素，以便测验它们。所以，咱们要把这个层添加到咱们现有的组件中，像这样。
<TextInput
style={styles.inputText}
placeholder="Email..."
placeholderTextColor="#003f5c"
accessibilityLabel="email"
onChangeText={text => setEmail(text)} />
</View>
很好!现在让咱们来设置Appium并运转咱们的测验。
在React Native中装置Appium
有两种方法来装置Appium服务器。你能够下载并装置Appium桌面或者用npm装置。
假如你要经过npm装置它，那么运转npm install -g appium ，这是咱们在本教程中要运用的形式。
之后，装置咱们将用于与Appium服务器通讯的WD.js网络驱动程序。
npm install wd
为了保证一切顺利，你能够用npm装置appium-doctor。
npm install appium-doctor -g
然后在你的终端上运转它。
appium-doctor -h
接下来，创立一个测验文件，并在其中添加以下代码。
import wd from 'wd';
jasmine.DEFAULT_TIMEOUT_INTERVAL = 600000;
const PORT = 4723;
const config = {
platformName: "iOS",
platformVersion: "14.4",
deviceName: "iPhone 11",
app: "path/to/your.apk or yourapp.ipa",
automationName: "XCUITest",// UiAutomator2, Espresso, or UiAutomator1 for Android
};
const driver = wd.promiseChainRemote('localhost', PORT);
beforeAll(async () => {
await driver.init(config);
})
test('Test Accessibilty Id', async () => {
expect(await driver.hasElementByAccessibilityId('email')).toBe(true);
expect(await driver.hasElementByAccessibilityId('password')).toBe(true);
});
装备部分很重要，所以要保证你为你的设备输入正确的选项（iOS设备装备）。
const config = {
platformName: "iOS",
platformVersion: "14.4",
deviceName: "iPhone 11",
app: "path/to/your.apk or yourapp.ipa",
automationName: "XCUITest",// UiAutomator2, Espresso, or UiAutomator1 for Android
};
例如，一个Android设备的装备应该是这样的。
const config = {
platformName: "Android",
platformVersion: "8",
deviceName: "Android Emulator",
app: "/path/to/the/downloaded/app.apk",
automationName: "UiAutomator2"
}
在这里，咱们现已完结了驱动程序的设置。
const driver = wd.promiseChainRemote('localhost', PORT);
现在咱们需求装备网络驱动，设置长途服务器和端口。在咱们的比方中，Appium运转在咱们的本地机器上，所以咱们把它设置为localhost ，并运用默许端口4723 。
现在开端测验。在这里，咱们仅仅承认电子邮件和暗码字段的可拜访性标签现已设置。这就是它应该有的姿态。
test('Test Accessibilty Id', async () => {
expect(await driver.hasElementByAccessibilityId('email')).toBe(true);
expect(await driver.hasElementByAccessibilityId('password')).toBe(true);
});
在Appium中运转测验
为了运转测验，咱们首要经过在指令行上运转Appium来发动Appium服务器，像这样。
ezesundayeze@Ezes-MacBook-Pro appium-app $ appium
[Appium] Welcome to Appium v1.20.2
[Appium] Appium REST http interface listener started on 0.0.0.0:4723
接下来，翻开另一个终端，运转npm test login 。你的成果应该是这样的。
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 1 total
Time: 5.775s, estimated 7s
Ran all test suites matching /login/i.
Appium将检查运用程序的用户界面，并测验是否为电子邮件和暗码设置了可拜访性标签。假如一切正常，它将回来一个经过，否则，你的测验将失败。
就这样了!你现已完结了。
除了Appium之外，你还能够运用其他选项，比方Selenium或Selendroid。然而，Appium是最受欢迎的移动自动化测验东西，由于Appium的测验能够运用相同的API为iOS和Android编写，并且它是开源的。
结论
测验你的React Native移动运用程序可能很耗时，但关于你未来的自己和办理运用程序的团队来说，这是一项重要的投资，由于它能够防止错误，进步客户的信心和忠诚度，并让你在晚上睡得好。
期望你现已了解了测验运用程序的重要性，以及怎么运用Appium开端测验你的移动运用程序。
像平常一样，请检查Appium文档，以更深化地测验你的React Native运用。编码愉快!
The postTesting your React Native app with Appiumappeared first onLogRocket Blog.
