Play UI automation testing in minutes

For a moment, it feels amazing to see the automatic simulation user interface.

I won’t explain what UI automated testing is. Basically, it’s what you thought of just now.

The hierarchical automated testing includes: UI testing, integration/interface testing, and unit testing. The Great God told me: UI automation testing accounts for only 10% of automation testing. Don't care about the specific ratio for the first time, we are concerned about the actual value, which needs to be judged according to the actual project. But for UI automation, basically the automation of smoke test cases is almost the same, from the UI to verify the stability of the main business process, while reducing some maintenance costs.

Today we are going to talk about WebdriverIO. WebdriverIO is a Webdriver Node.js module. It has a rich API and supports Mobile. But when it comes to Webdriver, you need to understand the development process of Selenuim first. I won’t pretend to be forced here. Take a look at the official website.

WebdriverIO has two usage modes, one is Standalone Mode and the other is WDIO. The official recommendation is to use WDIO for several reasons:

1. Easy to debug

2. Multi-module parallel testing

3. The execution of commands is synchronous, and the results are received directly through variables, instead of performing an asynchronous operation like Standalone Mode

4. Provide configuration files to make the configuration of test parameters easier

Let's start our project:

Project construction conditions:

1. Install JDK
2. Install Node.js
3. Install webdriverio
4. Install selenium-standalone
5. Install wdio
6. Install mocha, test framework
7. Install chai, diagnostic library

Directory Structure:

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" //生成测试报告
 }

About wdio-spec-reporter, allure-commandline, wdio-allure-reporter do not necessarily need to be installed.

After the selenium-standalone package is successfully installed, you need to execute the following commands to install the browser drivers. You may encounter problems during the installation process. It is recommended to try over the wall

selenium-standalone install

After the installation is successful, execute the following command to start selenium-server:

selenium-standalone start

wdio configuration file:

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');
  }
};

Login test case:

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); // 如果这样元素存在代表成功
  });
});

Method registration and calling instructions:

// 可以通过 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, /已经成为好友|成功加入|已经申请|成功申请/, '判断收到的消息是否包含指定的内容');
});

If you exchange experience in software testing, interface testing, automated testing, and interviews. If you are interested, you can add software test communication: 1085991341, and there will be technical exchanges with colleagues.

Perform the test:

Console A

npm run selenium //Start selenium-server

Console B

npm run test //Execute test

Generate test report:

npm run allure

to sum up:

Sometimes you don't need to assert to verify whether the use case is executed correctly. Like the login use case above, the element of waitForExist can only be seen after the login is successful, so this can also represent success.
The above is the whole content of this article, I hope it will be helpful to everyone's study. Friends who have been helped are welcome to like and comment.