首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

最受欢迎的5款Node.js端到端测试框架(2)

最受欢迎的5款Node.js端到端测试框架(2)

查看报告
►测试通过


►测试失败


Protractor
Protractor 是 Angular 官方正在使用的 E2E 测试框架,可以说是专门为 Angular 定制,内置了各种可以选择、操作 Angular  元素的便捷方法,如果你的应用基于 Angular 开发,使用它可以减少很多重复代码(显然类似的便利在其他框架中也有支持)。对于 Angular  的重度使用者,Protractor 会是非常明智的选择,不同于 CasperJS 的是 Protractor  在真实浏览器中运行测试代码。此外,Protractor 内置的页面加载等待的功能,在 CasperJS  中需要自己设置合理的超时。相比于本文列出的其他框架,Protractor 的明显优势是测试用例的组织方式可以自由使用 Jasmine 或者 Mocha。
安装步骤
       
  • 安装 JDK   
  • 安装 Protractor:npm install –g protractor   
  • 初始化 WebDriver Manager:webdriver-manager update   
  • 创建配置文件
编写测试
Protractor 默认开启了等待 Angular 加载并初始化完成的功能,如果你测试的不是 Angular  应用,则需要关闭这个功能,测试代码示例如下:
  • describe('angularjs homepage todo list', function () {

  •     browser.ignoreSynchronization = true;   // 不启用智能等待,因为 github 不是用 angluar 编写的

  •     browser.get('https://github.com');


  •     it('should search input visible', function () {

  •         var searchInput = element(by.className('js-site-search-focus'));

  •         var searchForm = element(by.className('js-site-search-form'));

  •         expect(searchInput.isDisplayed()).toEqual(true);

  •         searchInput.sendKeys('protractor');

  •         searchForm.submit();

  •     });


  •     it('should show 10 results', function () {

  •         var searchList = element.all(by.className('repo-list-item'));

  •         expect(searchList.count()).toEqual(10);

  •         element(by.css('.repo-list-item h3 a')).click();

  •     });


  •     it('should repo detail visible', function () {

  •         var repoContent = element.all(by.className('repository-content'));

  •         expect(repoContent.isDisplayed()).toEqual([true]);

  •     });


  •     it('should protractor repo found', function (done) {

  •         browser.executeScript(function () {

  •             return window.location;

  •         }).then(function (location) {

  •             expect(location.pathname).toEqual('/angular/protractor');

  •             done();

  •         });

  •     });

  • });
运行测试
       
  • 运行 WebDriver Manager: webdriver-manager start   
  • 运行测试:protractor protractor.config.js
查看报告
►测试通过


►测试失败


Nightwatch
同样流行的 Nightwatch,可以认为是 Protractor 的主要竞争对手,使用 Nigthwatch  编写的代码非常简洁,但是你需要手动在测试代码中添加合适的等待来保障测试的稳定,而 Protractor 和 TestCafe  则提供了内置的支持;Nightwatch 的主要劣势在于繁琐的安装步骤,可能部分同学看到这个安装文档或者下面的安装步骤就知难而退了。
安装步骤
       
  • 安装 JDK,版本 7 以上   
  • 下载 Selenium: selenium-server-standalone-{VERSION}.jar,复制到测试目录   
  • 下载 WebDriver for Google Chrome,复制到测试目录   
  • 安装 Nightwatch: npm install -g nightwatch   
  • 创建配置文件,需要在配置中声明 chromewebdriver 的地址;
编写测试
  • module.exports = {

  •     'Github Search': function (browser) {

  •         browser // 打开首页、填写搜索词、提交搜索表单

  •             .url('https://github.com')

  •             .assert.visible('.js-site-search-focus', 'should search input visible')

  •             .setValue('.js-site-search-focus', 'nightwatch')

  •             .submitForm('.js-site-search-form')

  •             .pause(1000);


  •         browser.execute(function () {   // 确认展示 10 条搜索结果

  •             return document.querySelectorAll('.repo-list-item').length;

  •         }, function (args) {

  •             browser.assert.equal(args.value, 10, 'should show 10 results');

  •         });


  •         browser.click('.repo-list-item h3 a').pause(1000);


  •         browser.assert.visible('.repository-content', 'should repo detail visible');


  •         browser.execute(function () {

  •             return window.location;

  •         }, function (args) {    // 确认打开了 nightwatch 官网

  •             browser.assert.equal(args.value.pathname, '/nightwatchjs/nightwatch', 'should nightwatch repo found');

  •         });


  •         browser.end();

  •     }

  • };
继承事业,薪火相传
返回列表