Appium自动测试之React Native

lsekfe

　Appium是一款开源测试工具，可以用来测试安卓/iOS/Windows端的原生应用和Web混合应用。
　　工作原理
　　Appium有一个客户端-服务器架构。Appium客户端向Appium服务器（一个Node.js HTTP服务器）发送请求，反过来，Appium服务器向执行动作的设备发送请求。然后，服务器将结果返回给客户端，让你知道测试的状态。

　　功能
　　·跨平台
　　· 多开发语言支持
　　· 不需要重新编译应用程序
　　· 不需要重复找轮子，可共用API
　　· 市场占有率TOP1
　　优点
　　1. 方便的切换测试原生应用或App内嵌的web页面，对Hybrid App友好。
　　2. 使用各个平台自身提供的测试框架，因此无需引入第三方代码或重新打包应用。
　　3. 开源，维护频率很高，社区也有相对较高的活跃度。
　　4. 支持通过自定义插件寻找元素。
　　缺点
　　1. 不支持单元测试、跨应用测试。
　　2. 测试效率相对较低。
　　使用

默认您已经安装node以及对应的Android或IOS等相关环境

　　使用appium有两种方式：
　　方式1：npm；
　　方式2：下载Appium Desktop，这是一种基于图形的、基于桌面的方式来启动 Appium 服务器。
　　这里主要介绍npm的使用方式
　　step 1: 安装appium
　　npm install -g appium

　　step 2: 安装webdriverio
　　npm install --save webdriverio @wdio/cli

　　webdriverio是什么？
　　基于Node.js的下一代浏览器和移动自动化测试框架。
　　生成 Web 驱动程序配置文件以在测试时应用配置。
　　step 3: 配置webdriverio
　　执行npx wdio config：

　　生成的文件目录如下：

　　及wdio.conf.js配置文件复制并修改有注释的字段到你的wdio.config.js文件。

1. exports.config = {
   
2. 　　  port: 4723,
   
3. 　　  services: [['appium', {command: 'appium'}]],
   
4. 　　  runner: 'local',
   
5. 　　  specs: ['./test/specs/**/*.js'], // 测试目录
   
6. 　　  maxInstances: 1,
   
7. 　　  capabilities: [
   
8. 　　    {
   
9. 　　      maxInstances: 1,
   
10. 　　      browserName: '',
    
11. 　　      appiumVersion: '1.22.3', // appium -v 获取
    
12. 　　      platformName: 'Android',
    
13. 　　      platformVersion: '9', // 安卓版本
    
14. 　　      deviceName: 'Nexus_S_API_28', // 设备名称 执行adb -s emulator-5554 emu avd name 获取
    
15. 　　      app: './android/app/build/outputs/apk/debug/app-debug.apk', // apk目录， 没有的话先在Android studio build一个
    
16. 　　      automationName: 'UiAutomator2',
    
17. 　　    },
    
18. 　　  ],
    
19. 　　  logLevel: 'trace',
    
20. 　　  bail: 0,
    
21. 　　  waitforTimeout: 10000,
    
22. 　　  connectionRetryTimeout: 90000,
    
23. 　　  connectionRetryCount: 3,
    
24. 　　  framework: 'mocha',
    
25. 　　  reporters: ['dot'],
    
26. 　　  mochaOpts: {
    
27. 　　    ui: 'bdd',
    
28. 　　    timeout: 60000,
    
29. 　　  },
    
30. 　　};

复制代码

step 4: 创建一个测试用例
　　修改test/specs/example.e2e.js文件。

1. describe('Simple App testing', () => {
   
2. 　　  beforeEach(async () => {
   
3. 　　    const app = await $('~app-root');
   
4. 　　    await app.waitForDisplayed(10000, false);
   
5. 　　  });
   
6. 　　  it('Login test: valid case', async () => {
   
7. 　　    const username = await $('~username');
   
8. 　　    await username.setValue('codemagic');
   
9. 　　    const password = await $('~password');
   
10. 　　    await password.setValue('nevercode');
    
11. 　　    const loginBtn = await $('~login');
    
12. 　　    await loginBtn.click();
    
13. 　　    await $('~loginstatus').waitForDisplayed(11000);
    
14. 　　    const status = await $('~loginstatus').getText();
    
15. 　　    expect(status).toHaveValueContaining('登录成功');
    
16. 　　  });
    
17. 　　  it('Login test: invalid case', async () => {
    
18. 　　    await $('~username').setValue('nevercode');
    
19. 　　    await $('~password').setValue('codemagic');
    
20. 　　    await $('~login').click();
    
21. 　　    await $('~loginstatus').waitForDisplayed(11000);
    
22. 　　    const status = await $('~loginstatus').getText();
    
23. 　　    expect(status).toHaveValueContaining('未登录'); // 断言https://webdriver.io/docs/api/expect-webdriverio
    
24. 　　  });
    
25. 　　});

复制代码

step 5: 创建一个app页面
　　如图：

　　修改你的App.js：

1. import React, {Component} from 'react';
   
2. 　　import {
   
3. 　　  TouchableHighlight,
   
4. 　　  StyleSheet,
   
5. 　　  Text,
   
6. 　　  TextInput,
   
7. 　　  View,
   
8. 　　} from 'react-native';
   
9. 　　export default class App extends Component {
   
10. 　　  constructor() {
    
11. 　　    super();
    
12. 　　    this.state = {
    
13. 　　      username: '',
    
14. 　　      password: '',
    
15. 　　      isLogined: false,
    
16. 　　    };
    
17. 　　  }
    
18. 　　  inputChangeHandler = (value, name) => {
    
19. 　　    this.setState({
    
20. 　　      [name]: value,
    
21. 　　    });
    
22. 　　  };
    
23. 　　  login = () => {
    
24. 　　    if (
    
25. 　　      this.state.username === 'codemagic' &&
    
26. 　　      this.state.password === 'nevercode'
    
27. 　　    ) {
    
28. 　　      this.setState({isLogined: true});
    
29. 　　    } else {
    
30. 　　      this.setState({isLogined: false});
    
31. 　　    }
    
32. 　　  };
    
33. 　　  render() {
    
34. 　　    return (
    
35. 　　      <View
    
36. 　　        style={LOCAL_STYLES.wrapper}
    
37. 　　        testID="app-root"
    
38. 　　        accessibilityLabel="app-root">
    
39. 　　        <Text style={{fontSize: 22, marginBottom: 20}}>登录页面</Text>
    
40. 　　        <View style={LOCAL_STYLES.inputContainer}>
    
41. 　　          <TextInput
    
42. 　　            name="username"
    
43. 　　            accessibilityLabel="username"
    
44. 　　            style={LOCAL_STYLES.input}
    
45. 　　            onChangeText={text => this.inputChangeHandler(text, 'username')}
    
46. 　　          />
    
47. 　　        </View>
    
48. 　　        <View style={LOCAL_STYLES.inputContainer}>
    
49. 　　          <TextInput
    
50. 　　            name="password"
    
51. 　　            accessibilityLabel="password"
    
52. 　　            secureTextEntry={true}
    
53. 　　            style={LOCAL_STYLES.input}
    
54. 　　            onChangeText={text => this.inputChangeHandler(text, 'password')}
    
55. 　　          />
    
56. 　　        </View>
    
57. 　　        <Text accessibilityLabel="loginstatus">
    
58. 　　          {this.state.isLogined ? '登录成功' : '未登录'}
    
59. 　　        </Text>
    
60. 　　        <TouchableHighlight
    
61. 　　          style={LOCAL_STYLES.buttonContainer}
    
62. 　　          accessibilityLabel="login"
    
63. 　　          onPress={this.login}>
    
64. 　　          <Text style={{color: 'white'}}>Login</Text>
    
65. 　　        </TouchableHighlight>
    
66. 　　      </View>
    
67. 　　    );
    
68. 　　  }
    
69. 　　}
    
70. 　　const LOCAL_STYLES = StyleSheet.create({
    
71. 　　  wrapper: {
    
72. 　　    flex: 1,
    
73. 　　    alignItems: 'center',
    
74. 　　    justifyContent: 'center',
    
75. 　　  },
    
76. 　　  inputContainer: {
    
77. 　　    borderBottomColor: '#AFAFAF',
    
78. 　　    backgroundColor: '#FFFFFF',
    
79. 　　    borderRadius: 10,
    
80. 　　    borderBottomWidth: 1,
    
81. 　　    marginBottom: 16,
    
82. 　　    flexDirection: 'row',
    
83. 　　    alignItems: 'center',
    
84. 　　    width: '80%',
    
85. 　　    borderColor: 'blue',
    
86. 　　    borderWidth: 1,
    
87. 　　  },
    
88. 　　  buttonContainer: {
    
89. 　　    height: 45,
    
90. 　　    width: 250,
    
91. 　　    flexDirection: 'row',
    
92. 　　    justifyContent: 'center',
    
93. 　　    alignItems: 'center',
    
94. 　　    marginBottom: 20,
    
95. 　　    borderRadius: 20,
    
96. 　　    backgroundColor: '#00b5ec',
    
97. 　　  },
    
98. 　　});

复制代码

step 6:  编译你的应用到模拟器

yarn android
　　yarn start

step 7:  执行测试用例
　　npx wdio ./wdio.conf.js

　　执行通过后会有passed的打印：
　　Spec Files:      1 passed, 1 total (100% completed) in 00:00:32

　　至此，测试结束！
　　Q&A
　　如何来标识RN组件？
　　对于 Android，添加accessibilityLabel属性；
　　对于 iOS，添加testID属性。

1. <View style={LOCAL_STYLES.inputContainer}>
   
2. 　　      <TextInput name="password" accessibilityLabel="password" testID='password' secureTextEntry={true} style={LOCAL_STYLES.input} onChangeText={(text) => this.inputChangeHandler(text, "password")} />
   
3. 　　 </View>

复制代码