分分钟玩转UI自动化测试

有没有那么一刻，看到自动模拟用户操作界面感觉好神奇。

关于什么叫 UI 自动化测试就不解释了，基本上是你刚才脑海里想到什么就是什么。

在分层自动化测试中包括：UI 测试、集成/接口测试、单元测试。大神告诉我：UI 自动化测试在自动化测试中占比只有10%。先不用在乎具体这个比例是什么，我们关注的是实际价值，这个需要根据实际项目来判断。不过对于 UI 自动化，基本上做冒烟测试用例的自动化就差不多了，从 UI 上来验证主业务流程的稳定性，同时降低一些维护成本。

今天我们来聊聊 WebdriverIO，WebdriverIO 是 Webdriver Node.js 模块，API 非常丰富，同时支持 Mobile，不过说到 Webdriver 那就需要先了解一下 Selenuim 的发展过程，这里就不装逼了，有兴趣的可以到官方网站瞅瞅。

WebdriverIO 有两种使用模式，一种是 Standalone Mode，一种是 WDIO。官方其实是推荐使用 WDIO，大概几个原因：

1. 调试方便

2. 多模块并行测试

3. 命令的执行都是同步的，直接通过变量接收结果，不用像 Standalone Mode 执行一个异步操作

4. 提供配置文件，使测试参数的配置更简单

下面开始我们的项目：

项目搭建条件：

1. 安装 JDK
2. 安装 Node.js
3. 安装 webdriverio
4. 安装 selenium-standalone
5. 安装 wdio
6. 安装 mocha，测试框架
7. 安装 chai，诊断库

目录结构：

package.json：

"devDependencies": {
   "webdriverio": "^4.6.2",  // webdriverio 库
   "selenium-standalone": "^6.2.0",  // selenium standalone server、浏览器driver安装
   "wdio": "^0.3.3",  // wdio测试运行器
   "wdio-mocha-framework": "^0.5.9",  // 摩卡测试框架
   "chai": "^3.5.0",  // 诊断库
   "wdio-spec-reporter": "^0.1.0",  // 控制台输出测试报告
   "allure-commandline": "^1.5.0",  // 根据测试结果生成测试报告
   "wdio-allure-reporter": "^0.1.2"  // 根据测试报告展现更直观的UI界面
 },
"scripts": {
   "selenium": "selenium-standalone start", // 启动selenium
   "test": ".\\node_modules\\.bin\\wdio", // 执行test
   "allure": "allure generate allure-results && allure report open" //生成测试报告
 }

关于 wdio-spec-reporter、allure-commandline、wdio-allure-reporter 不一定全需要安装。

selenium-standalone 包安装成功后需要执行以下命令来安装各浏览器 driver，install的过程中可能会遇到问题，建议翻墙试试

selenium-standalone install

安装成功后，执行以下命令就可以启动 selenium-server：

selenium-standalone start

wdio 配置文件：

var config = require('./config');
var common = require('./common');

exports.config = {
  // selenium-server 启动的IP和端口，默认是4444
  host: '127.0.0.1',
  port: 4444,
  // 哪些文件执行测试
  specs: [
    './modules/*.js'
  ],
  // 哪些文件不执行测试
  exclude: [
    './modules/function.js',
    './modules/register.js',
    './modules/invite.js'
  ],
  // 使用什么浏览器来执行测试
  capabilities: [{
    browserName: 'chrome',
    maxInstances: 1, // 最多启动多少个浏览器窗口并行执行
    chromeOptions: {
      args: ['disable-extensions']
    }
  }],
  logLevel: 'silent',
  coloredLogs: true,
  baseUrl: config.webUrl,
  waitforTimeout: 100000, // 100s
  framework: 'mocha',
  reporters: ['spec', 'allure'], // 两种测试报告方式
  reporterOptions: {
    allure: {
      outputDir: 'allure-results' // allure测试结果上传目录
    }
  },
  mochaOpts: {
    ui: 'bdd',
    timeout: 99999999  // 整个测试执行的超时时间，长就对了
  },
  // 每次执行测试前把之前allure保留的测试结果清空
  onPrepare: function (config, capabilities) {
    common.deleteFile('./allure-report');
    common.deleteFile('./allure-results');
  }
};

登录测试用例：

describe('login-test', function () {
  it('login', function () {
    return browser
        .deleteCookie() // 删除所有cookie
        .url(config.webUrl + '/login.htm') // 打开登录页面
        .setValue('#txtMobilePhone', config.loginInfo.mobilePhone) // 设置手机号
        .setValue('#txtPassword', config.loginInfo.password) // 设置密码
        .click('#btnLogin') // 点击登录按钮
        .waitForExist('#topBarContent', config.waitMS); // 如果这样元素存在代表成功
  });
});

方法注册与调用说明：

// 可以通过 browser.checkInviteSuccess()调用
browser.addCommand('checkInviteSuccess', function (inboxType) {

  $('.sessionList .sessionItem[id="' + inboxType + '"]').click();
  browser.waitForExist('.messageItem', config.waitMS);

  var result = browser
      .execute(function () {
          var text = null;
          $('.inboxBox .messageItem .textMsg').each(function () {
              text += $(this).text();
          });
          return text;
      });

  // 断言正则表达式方法
  assert.match(result.value, /已经成为好友|成功加入|已经申请|成功申请/, '判断收到的消息是否包含指定的内容');
});

如果对软件测试、接口测试、自动化测试、面试经验交流。感兴趣可以加软件测试交流：1085991341，还会有同行一起技术交流。

执行测试：

控制台A

npm run selenium //启动selenium-server

控制台B

npm run test //执行test

生成测试报告：

npm run allure

总结：

有时候不用非要断言来验证用例是否正确执行，像上面的登录的用例中，waitForExist 的元素是登录成功后才可以看见，所以这样也是可以代表成功的。
以上就是本文的全部内容，希望对大家的学习有所帮助。有被帮助到的朋友欢迎点赞，评论。