基于Node.js的UI自动化主流框架

若她涉世未深,就带她看尽人间繁华; 若她心已沧桑,就带她坐旋转木马。

文章尝试对基于Node的主流框架进行一个对比,从而"看尽繁华"。但是对比的指标和权重选取有一定的倾向性。不过,其中各个框架的试用,以及各个指标选取的背后思考还是可以借鉴参考。

1. 为什么是Node.js?而不是Java?

Java的好处:

  • 传统的UI自动化基本就是Selenium为主导了,各种语言的版本都有,但是业内大部分是JAVA系统,所以还是Selenium-Java这一系列为主。
  • 被测系统一般都是Java应用,各种中间件,数据准备API也是Java,便于调用。

 

Node的好处:

  • Javascript对于前端更熟悉了,如果前端自测,无论是单元还是E2E,都更高效。
  • 前后端分离以及基于Node版的中间件模块越来越多,在Node里调用也不是太大问题。
  • 社区和新的框架层出不穷,脚本解释型编写调试效率略高一丢丢。

 

2. 成功入围选手

基于Node.js的UI自动化主流框架

3. 一言不合就列KPI

重要指标

  • 同步 vs. 异步
  • 多浏览器支持
  • Debug手段(单步调试)
  • API扩展
  • Page Object
  • 语法简洁
  • 用例管理
  • 无线支持

 

权重标准

  • 上面的指标,按照权重自上而下排列。
  • 不过权重大小的标准是主观的,基于和Nightwatch互补,所以目标是同步、支持多浏览器和Debug方便的框架。
  • 你完全可以设定不同的权重得出不同的目标框架。

 

4. 比武招亲正式开始

同步 vs. 异步

因为Node是异步的,所以所有框架原生都是异步的。为了解决callback的噩梦,有Promise等框架可以使得书写更加像同步那样。在这里我们说的同步是说不只是写起来,而是执行也是同步的,就和Java一样。

之所以看重这个指标,是因为:

  • 现实中,其实大部分写UI自动化的人是测试同学。他们对于javascript和异步编程接触很少,对于异步的编写和调试往往呈现不适应,转而排斥Node系列的框架和归纳为UI自动化成本高这样的原因。
  • 很多原有的UI自动化脚本是Java版的,年久失修以后,想拿来修修重用,转成异步发现一脸懵逼了。
  • UI自动化比前端页面写javascript更多的异步逻辑。其实,由于浏览器和自动化脚本是两个进程,webdriver也是问答形式控制浏览器,那么异步编程就是自然而然的事情。相当于一直在和后端通过ajax接口交换数据,但是坏处就是稍复杂一些的用例逻辑,callback噩梦无法避免。

其实本身而言,同步异步只是一个适应的问题,并没有优劣之分。

比较

基于Node.js的UI自动化主流框架

  • WebdriverIO和Selenium-webdriver都通过插件将异步函数通过队列转化为同步执行管理。

 

WebdriverIO的例子

异步:

    var webdriverio = require('webdriverio');
    var options = { desiredCapabilities: { browserName: 'chrome' } };
    var client = webdriverio.remote(options);

    client
        .init()
        .url('https://www.taobao.com/')
        .setValue('input.search-combobox-input', 'webdriverIO');
        .click('button.btn-search')
        .pause(2000);
        .getTitle().then(function(title) {
            console.log('Title is: ' + title);
        })
        .end();

同步:

    describe('Taobao search', function() {
        it('searches for WebdriverIO', function() {
            browser.windowHandleSize({width: 1024, height: 800});
            browser.url('https://www.taobao.com/');
            browser.setValue('input.search-combobox-input', 'webdriverIO');
            browser.click('button.btn-search');

            browser.pause(3000);
            // 同步的话,我可以变量得到返回值随意进行后续操作,而非callback。
            var title = browser.getTitle();
            console.log('Title is: ' + title);
            //browser.end();
        });
    });

多浏览器支持

在电商的测试环境中,很多时候我们牵涉到多用户的浏览器操作,比如买卖家,助手问答,客服问答,问题双方等等。这时,解决方法有两种:
1. 一种是不断的切换账号达到一个浏览器多个账户的目的,但这显然是比较弱的,执行的观感也会冗余。
2. 另一种是自然的启动两个浏览器,在脚本里对不同的browser方便的做不同操作,必要时候进行同步,达到协作的目的。

比较

基于Node.js的UI自动化主流框架

评价

虽然号称都支持,但其实支持的方式是不同的,便利程度也不同:

  • Nighwatch是用同一个用例,并发执行用例的方式进行支持,如下面例子展示的一样。执行时通过参数可以决定有哪些浏览器启动,在脚本中通过环境变量进行分别操控,类似多线程编程的感觉。缺点就是整个用例充满了if else,像是硬把两个用例掺杂在了一起,异步再加上这种多线程的编写,给阅读调试都带来不小的难度。
  • WebdriverIO是在配置里配好启动的浏览器名字,脚本里直接使用,因为是同步编程,所以就是按顺序执行了,相对更容易理解多了。
  • 其他的框架都是类似的,driver或者browser是动态创建的,所以脚本里创建多少个就用多少个,也是非常简单直接的。

例子

 

$ nightwatch --env chrome,firefox

脚本

module.exports = new (function() {  
  var firstClient = process.env.__NIGHTWATCH_ENV_KEY == 'chrome_1';
  var testCases = this;

  testCases['opening the browser and navigating to the url'] = function (client) {
    client
      .url('https://simplewebrtc.com/demo.html?nightwatchjs')
      .waitForElementVisible('body', 1000);
  };

  if (firstClient) {
    testCases['wait for clients to become connected'] = function(client) {
      client
        .waitForElementVisible('#localVideo', 1500)
        .waitForClientConnected('#localVideo', 5000)
        .waitForClientConnected('#remotes .videoContainer:nth-child(1) video', 8000,
          'Remote video stream (%s) was connected in %s ms.');
    };

    testCases['wait for peer to disconnect'] = function (client) {
      client
        .pause(1000)
        .waitForElementNotPresent('#remotes video', 10000);
    };
  } else {
    testCases.suspend = function (client) {
      client.pause(10000);
    };
  }

  testCases.after = function(client) {
    client.end();
  };

})();
  • WebdriverIO:
    配置:

    capabilities: {
        myChromeBrowser: {
            desiredCapabilities: {
                browserName: 'chrome'
            }
        },
        myFirefoxBrowser: {
            desiredCapabilities: {
                browserName: 'firefox'
            }
        }        
    },
    

    脚本:

    describe('Taobao search', function() {
    it('searches for WebdriverIO', function() {
        //两个浏览器都进行的操作
        browser.windowHandleSize({width: 1024, height: 800});
        browser.url('https://www.taobao.com/');
    
        // Chrome单独操作,先执行
        myChromeBrowser.setValue('input.search-combobox-input', 'Chrome');
        myChromeBrowser.click('button.btn-search');
    
        // Firefox单独操作,后执行
        myFirefoxBrowser.setValue('input.search-combobox-input', 'Firefox');
        myFirefoxBrowser.click('button.btn-search');
    
        browser.pause(1000);
    
        var title = browser.getTitle();
        console.log('Title is: ' + title);
        // outputs: "Title is: WebdriverIO (Software) at DuckDuckGo"
        browser.end();
    });
    });

Debug支持

异步情况下,对于Debug要求会高一些,最好能够像在IDE中一样单步调试。Node本身有node-inspector可以达到这样的效果,但是往往框架都会有自己的命令行环境,这种情况下,是否还能调用?没有尝试过改造的可行性,但是就从框架本身的介绍来看,我们发现WebdriverIO和Intern是支持的。

比较

基于Node.js的UI自动化主流框架

例子

在配置里打开debug:true,启动后连接到node-inspector配置的端口即可。但是,如果同步编程的话,其实感觉一般的暂停debugger和log已经基本够用了,单步调试使用的场景不是很多。

API扩展

对于框架来讲,API级别能不能很好的扩展也是挺重要的,最起码我们要扩展一些登录、HSF调用等数据准备的公共函数。当然,因为是开源的,其实都可以修改源码的方式进行扩展,这种就不在此列了。

比较

基于Node.js的UI自动化主流框架

Page Object

相对于API扩展,更贴合页面的一种抽象层次,复用的好可以减少很多页面元素定位操作的重复劳动。

比较

基于Node.js的UI自动化主流框架

语法简洁

根本都是基于webdriver的协议,所以语法都类似,但是具体还是有些简洁的差别。从下面例子还是可以看出来,Nightwatch和WebdriverIO比较简洁,Intern是有些繁琐了。

比较

基于Node.js的UI自动化主流框架

例子

原文例子地址

client
.url('http://google.com')
.setValue('#q', 'webdriver')
.click('#btnG')

Notice how this is far simpler than with the original selenium-webdriverjs,

driver.get('http://www.google.com');
driver.findElement(webdriver.By.id('q')).sendKeys('webdriver');
driver.findElement(webdriver.By.id('btnG')).click();

and significantly simpler than with WD.js:

browser
  .get("http://www.google.com")
  .elementById('q')
  .sendKeys('webdriver')
  .elementById('btnG')
  .click()

and GOD in intern.io:

this.remote
  .get(require.toUrl('http://www.google.com'))
  .findById('q')
    .type('webdriver')
    .end()
  .findById('btnG')
    .click()
    .end()

For more details on the comparison between WebdriverIO, selenium-webdriverjs and WD.js, read this discussion.

用例管理

有很多优秀的测试框架可以和UI自动化框架结合,达到用例管理,结果展示等功能,比如Mocha、Jasmine等。这里是指框架本身已经做了很好的集成,或者本身自己提供了功能。

比较

基于Node.js的UI自动化主流框架

无线支持

各个框架都是宣称支持webdriver for mobile的协议的,只是支持的API个数不同。如果能够很好支持,那就可以达到一个框架PC和无线通吃的便利性,但实际情况,大家无线还是倾向于专门的Appium等框架去做。

比较

基于Node.js的UI自动化主流框架

总览

基于Node.js的UI自动化主流框架

总评

  • Selenium-webdriver和WD.js侧重UI,但封装和功能都比较少。
  • Nightwatch和WebdriverIO各有千秋,社区活跃,友好性都不错。
  • Intern更加侧重全测试方案,覆盖各个测试阶段,单元测试、功能测试等。

 

所以冠军就是

基于Node.js的UI自动化主流框架其实还有更多的选择

  • Java型:Selenium-Java
  • 录制型:AUI、Selenium-IDE
  • 图像识别型:Skuli

 

和他们相比又有什么优劣呢?且听下回分解吧。

上一篇:python:使用selenium webdriver注意


下一篇:python_启用浏览器2021.3.4