用Appium测试你的React Native应用

当涉及到构建应用程序时，软件测试是至关重要的。根据信息和软件质量协会最近的一份报告，在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.