程序博客网 > 网络统考app

初步了解Angular 2端到端的测试 Introduction to E2E Testing with the Angular CLI and Protractor

来源：互联网 发布：网络统考app 编辑：程序博客网 时间：2024/06/17 19:18

Introduction to E2E Testing with the Angular CLI and Protractor 这个例子不错，里面不是讲解e2e的地方也有参考意义

https://coryrylan.com/blog/introduction-to-e2e-testing-with-the-angular-cli-and-protractor

https://github.com/coryrylan/ng-pokedex



【Angular2】Tour of Heroes 之 e2e测试：http://blog.csdn.net/Francis123580/article/details/72861818


背景

因为项目需要用到Angular2的端对端测试 
所以先用官方网站的Tour of Heroes项目练手

流程

1.在e2e文件夹中的app.e2e-spec.ts文件中输入下面的代码 
2.cd到本项目根文件夹 
3.在控制台中输入 ng e2e

效果图

这里写图片描述

代码

import { AngularTourOfHeroesPage } from './app.po';import { ComponentFixture, TestBed } from '@angular/core/testing';import { By } from '@angular/platform-browser';import { DebugElement } from '@angular/core';import { browser, element, by } from 'protractor';describe('Tour of Heroes', function () {  //测试:当访问网站的时候应该跳转到/dashboard这个路由  it('should redirect index.html to http://localhost:4200/dashboard', function () {    browser.get('').then(function (url) {      expect(browser.getCurrentUrl()).toBe('http://localhost:4200/dashboard');//断言      browser.sleep(1000);//睡眠1秒，观察效果    });  });  //测试Dashboard页面  describe('Dashboard Heroes',function(){    //每个测试用例it开始前执行    beforeEach(function(){      browser.get('http://localhost:4200');//浏览器导航到该地址    });    //测试：用户点击英雄，跳转显示该英雄的详细信息    it('should show the details of hero which user clicked',function(){      var heroes = element.all(by.className('col-1-4'));//获得4个Dashboard英雄元素      heroes.get(0).click().then(function(){//点击第一个英雄        expect(element(by.tagName('h2')).getText()).toBe('Narco details!');//断言      });    });    //测试：对用户输入进行异步查询，点击查询结果可跳转到该英雄的详细信息    it('should search the hero list as user types into the search box',function(){      var heroList = element.all(by.className('search-result'));//获得查询到的英雄      var query = element(by.id('search-box'));//输入框元素      query.sendKeys('a');//输入框输入a      expect(heroList.count()).toBe(8); //断言      query.clear();//清空输入框      query.sendKeys('b');//输入框输入b      expect(heroList.count()).toBe(2);//断言      heroList.get(0).click().then(function(){//点击查询得到的第一个英雄        expect(element(by.tagName('h2')).getText()).toBe('Bombasto details!');//断言      });    });  });  //测试Heroes页面  describe('Heroes',function(){    beforeEach(function(){      browser.get('');      element(by.linkText('Heroes')).click();    });    //测试：列表显示10个英雄    it('should show 10 heroes',function(){      var heroes = element.all(by.tagName('li'));      expect(heroes.count()).toBe(10);    });    //测试：点击英雄显示View Details按钮，点击按钮显示该英雄详细信息    it('should show Detail of Hero which user clicked',function(){      var heroList = element.all(by.tagName('li'));      heroList.get(0).click();      element(by.buttonText('View Details')).click();      expect(element(by.tagName('h2')).getText()).toBe('Mr. Nice details!');    });  });  //测试Detail页面  describe('Detail', function () {    beforeEach(function () {      browser.get('');    });    //测试：修改英雄名字，点击返回到Dashboard页面，显示修改后的名字    it('Dashboard Page: should show new name of hero after user edited', () => {      var heroes = element.all(by.className('col-1-4'));      heroes.get(0).click().then(() => {        element(by.tagName('input')).clear();        element(by.tagName('input')).sendKeys('HuBa');        browser.sleep(1000);//睡眠1秒，观察效果        element(by.buttonText('Back')).click();        var heroes = element.all(by.tagName('h4'));        expect(heroes.get(0).getText()).toBe('Huba');//should be Huba          });    });    //测试：修改英雄名字，点击返回到Heroes页面，显示修改后的名字    it('Heroes Page: should show new name of hero after user edited', () => {      element(by.linkText('Heroes')).click();      var heroes = element.all(by.tagName('li'));      heroes.get(0).click();      element(by.buttonText('View Details')).click();      element(by.tagName('input')).clear();      element(by.tagName('input')).sendKeys('BaBaLa');      browser.sleep(1000);//睡眠1秒，观察效果      element(by.buttonText('Back')).click();      expect(heroes.get(0).getText()).toBe('11 BaBaLa');    });  });});






================================================================================================


http://developer.51cto.com/art/201611/521391.htm?utm_source=tuicool&utm_medium=referral


有许多原因使我过去不愿对自己的应用添加自动化测试。原因之一是不知道其中的效益成本比率，另一个原因是考虑到集成到现有生产环境的应用可能比较难。测试应用而不用从头重构代码，仅仅只是引入测试要怎么做呢?

首先我们先从简单区分测试的类型开始。应用测试有很多类型，但最为常见的是单元测试及端对端测试(亦称为集成测试)。单元测试是测试代码自身行为的一种测试。在用户看来什么也没有做，但可以确保其方法能达到期望的目的。集成测试是模仿用户行为的一种测试。比如说，登陆系统，创建帖子，退出系统等这些操作都可以自动化，并且你可以用眼睛看到其过程是怎么发生的。

这两种类型的测试，它们通常彼此结合使用。对于新的开发来说，这将是理想的。如果时间有限制，或继承于现有项目的情况下，端对端测试或许比单元测试更加合适。因为我们并不需要过多了解先前的代码库，同样可以覆盖更多场景，这将比单元测试更快，因为单元测试并不测试单个单元而是整个场景。

单元测试依然重要，但如果你必须要在开始的时候选择一个，我认为端对端测试会是更好的选择。在这篇文章中，我将测试一个现有的Angular 2的待办事项的项目。我将使用集成测试，并覆盖一系列的场景。

如果你需要熟悉Angular 2的入门，请看这篇文章 Angular 2 article from Jscrambler。

被测试的场景

  • 当应用初始化加载时，有3件待处理的事情
  • 需要加载新待办事项
  • 点击一个待办事项，然后跳到待办事项的详细页
  • 删除一个待办事项
  • 编辑一个待办事项标题，然后保存后，可以在首页的待办事项列表中看到新标题
  • 不允许保存一个空的待办事项，在点了禁用的保存按钮后，待办事项的列表依然还是原来的总数
  • 起初加载首页时，添加新待办事项的按钮应处于禁用状态
  • 保存待办事项的按钮仅应在输入待办事项标题后处于编辑状体

Todo 应用程序概述

让我们简单的描述一下TODO应用程序。应用程序将首先在主页上列出待办事项清单。有三个待办事项会详细列出。

这写数据不会由服务端提供，而是从设备文件硬编码中加载。

在首页上，我们可以添加新的待办事项。我们可以通过点击代办事项的标题来访问其详细信息页面。在此页面上，我们可以编辑代办事项标题或删除待办事项。

克隆并设置Todo 应用程序

1、首先克隆我已经推送到存储库这里但未经测试的应用程序，确保你是在主分支克隆的。接下来，你需要安装几个工具以便能进行下面的操作，在本教程中，使用Candidate已经发布的Angular 2，版本为2。

2、确保您已安装NodeJS的版本是Node 4.x.x或更高版本。

3、使用以下命令安装节点依赖项：

  1. npm install 

当然是在克隆的存储库中操作

4.使用Angular-CLI进行开发。安装Angular-CLI 全局使用下面命令：

  1. npm install -g angular-cli@latest 

5.Angular 2 端到端测试使用被称为 protractor的工具来运行，安装protractor 全局使用下面命令：

  1. npm install -g protractor 

6.安装所有依赖项后，使用以下命令启动开发服务器：

  1. ng serve 

然后导航到浏览器地址：http://localhost:4200，您将看到三个待办事项列表。

如果您在启动服务器时遇到问题，您可以参考stackoverflow issue来解决问题。

Angular 2测试相关的重要概念

端对端测试的文件夹在e2e。 其中有一个已预备好的案列文件，文件名为es2/app.e2e-spec.ts。

其中的测试文件是用 jasmine 框架开发的。有很多方式模块化、组织Angular 2端对端测试，但这里为了方便，这篇文章都将在一个文件中进行。

我们这个应用仅有一个功能那就是待办事项。为了满足大家的好奇心或有人在想比上述更复杂的情况，试想一个需要测试订单、用户配置等功能更复杂的应用的场景。对此测试的场景，我将在e2e文件夹中分别为每个待测试功能创建一个文件夹，并将各自测试文件放置其中。

这种情况下，我们将有两个文件夹分别命名为e2e/orders 和 e2e/userProfile。每个文件夹中仅会有一个测试文件，或者为了满足更多待测试功能的需要而创建多个测试文件。需要注意的一点是每个测试文件都以word e2e-spec.ts结尾，这样Protractor测试工具才可以加载到。

Ok，还是回到我们简单的单个测试文件。如果你略有查看此文件，你会发现文件的头部有个导入声明(import statement)。导入是声明若干测试文件中所用的普通函数是源于哪里。然而这篇文章，我们不会使用这个，而将这个视为函数库。

在引入声明(import statement)之后，我们有一个描述性的代码块，它的两个函数调用即 beforeEach 和它里面的回调。

在描述代码块内，每个回调传递给 beforeEach 都需要测试。

每个测试再把里面的回调函数传递给它。

让我们用命令运行当前的测试

  1. protractor 

如果你在运行 protractor 两个命令中的一个时有问题，请参考这里。

  1. ./node_modules/protractor/bin/webdriver-manager update 

或者

  1. webdriver-manager update 

要是当前的测试失败，可能会在首页看到“app works”这样的文本提示。这并不是因为我们修改了首页的内容就出现这种情况。

在我们开始编写我们的测试之前，让我们理解一些重要的通用函数，然后使用 Angular 2 的端到端测试。

导航到页面

在测试文件中，有一个browser全局变量。它使用import语句引入

  1. import { browser, element, by } from 'protractor/globals'; 

你现在可以添加上。

例如，我们使用下面语句导航到你的应用程序中可用的任何页面

  1. browser.get('/'); 

到你的主页，和

  1. browser.get('/users'); 

到users页面。请注意，这些网址是相对的URL，我们也可以使用绝对URL，但是我建议使用相对URL，因为如果你的域名改变，这更易于维护。

选择元素

通常的做法是在当前页面上选择元素。你可以通过一个叫做element的全局变量选择元素。它接受可以使用全局by创建的定位器。

使用选择具有green类的p标签例子如下

  1. let greenParagraph = element(by.css('p.green')); 

选择多个元素，有些轻微的变化

  1. let greenParagraphs = element.all(by.css('p.green')); 

这将给出一个数组，而不是一个单一的元素。

抓取元素文本

要得到一个元素的文本，你必须先选择它，然后调用getText方法，想下面这样。

  1. let greenParagraph = element(by.css('p.green'));  
  2. let text = greenParagraph.getText(); 

点击元素

点击元素可以使用下面的语法完成

  1. let submitButton = element(by("form .submit-button"));  
  2. submitButton.click(); 

统计元素

我们也可以使用下面的语法来统计元素个数。

  1. let blueParagraphsList = elements.all(by("p.blue"));  
  2. let count = blueParagraphsList.count(); 

Test Scenarios测试方案

对于那些不太寻常的概念，我们列出了上面覆盖的场景。

确认要做的首要三件事

当应用程序初次被加载的时候，我们有将要做三件事。

在测试文件 e2e/app.e2e-spec.ts 的内部， beforeEach 代码块的下面，删除调用它的函数，并在下面添加

  1. it("should show three todos when we first load the todo app", () => {  
  2. browser.get("/");  
  3. let todos = element.all(by.css(".todos .todo"));  
  4. expect(todos.count()).toEqual(3);  
  5. }) 

不要忘记在这个文件的顶部添加这个导入声明

  1. import { browser, element, by } from 'protractor/globals'; 

现在，当你运行 protractor 命令，另一个浏览器将会被打开且迅速关闭，在你的控制台上你能看到通过测试的时候显示为绿色。

好的!我们刚刚已经写完了我们第一个通过 Angular 2 的端到端测试。

添加一个新的待办事项

现在进行下一个，我们可以添加一个待办事项。让我们用下面的代码添加一个测试块

  1. it("should be able to add a new todo", () => {  
  2. browser.get("/");  
  3. let newTodoInput = element(by.css(".add-todo input[type=text]"));  
  4. newTodoInput.sendKeys("Todo 4");  
  5. let newTodoSubmitButton = element(by.css(".add-todo input[type=submit]"));  
  6. newTodoSubmitButton.click();  
  7. let todos = element.all(by.css(".todos .todo"));  
  8. expect(todos.count()).toEqual(4);  
  9. }) 

我们在这里要做的是在待办事项输入框中输入文本并提交表单。然后我们检查是否有四个待办事项。 如果是的话，测试通过。

我们刚刚介绍了另一个函数sendKeys，它可以访问一个选中的元素，常用于输入文本到输入框这类元素中。

查看待办事项的详情页

我们应该能单击一个待办事项转到该待办事项的详情页，让我们用下面的测试实现它吧。

  1. it("should be able to click on a todo on the homepage and get to the details page", () => {  
  2. browser.get("/");  
  3. let firstTodo = element.all(by.css(".todos .todo")).first();  
  4. let firstTodoText = firstTodo.getText();  
  5. firstTodo.click();  
  6. let inputFieldText = element(by.css("todo input[type=text]")).getAttribute("value");  
  7. expect(inputFieldText).toEqual(firstTodoText);  
  8. }) 

删除一个待办事项

我们应该能删除一个待办事项。现在让我们试着删除一个待办事项看看能不能成功。

我们将转到待办事项页并单击删除链接，当我们返回主页时，我们能看到减少了一个待办事项。

  1. it("should be able to delete a todo", () => {  
  2. browser.get("/");  
  3. let firstTodo = element.all(by.css(".todos .todo")).first();  
  4. firstTodo.click();  
  5. let deleteLink = element(by.cssContainingText("span", "Delete"));  
  6. deleteLink.click();  
  7. let todosList = element.all(by.css(".todos .todo"));  
  8. expect(todosList.count()).toEqual(2);  
  9. }) 

编辑一个待办事项的标题

我们能编辑待办事项的标题，保存后能在主页的待办事项列表中显示新标题。

  1. it("should be able to edit a todo title", () => {  
  2. browser.get("/");  
  3. let firstTodo = element.all(by.css(".todos .todo")).first();  
  4. firstTodo.click();  
  5. let todoInputField = element(by.css("todo input[type=text]"));  
  6. todoInputField.clear();  
  7. todoInputField.sendKeys("Editted Todo1 Title");  
  8. let saveButton = element(by.css("todo button[type=submit]"));  
  9. saveButton.click();  
  10. firstTodo = element.all(by.css(".todos .todo")).first();  
  11. let firstTodoText = firstTodo.getText();  
  12. expect(firstTodoText).toEqual("Editted Todo1 Title");  
  13. }) 

不能保存空的待办事项

当我们想保存一个空的待办事项时，我们无法进行操作，并且单击禁用按钮时，待办事项列表依然保持同样的长度。

  1. it("should not be able to save an empty todo", () => {  
  2. browser.get("/");  
  3. let newTodoInput = element(by.css(".add-todo input[type=text]"));  
  4. let newTodoSubmitButton = element(by.css(".add-todo input[type=submit]"));  
  5. newTodoSubmitButton.click();  
  6. let todos = element.all(by.css(".todos .todo"));  
  7. expect(todos.count()).toEqual(3);  
  8. }) 

保存按钮在初始化时禁用

初始化时添加待办事项按钮被禁用，所以我们添加下列代码

  1. it("should have add todo button be disabled initially", () => {  
  2. browser.get("/");  
  3. let newTodoSubmitButton = element(by.css(".add-todo input[type=submit]"));  
  4. expect(newTodoSubmitButton.isEnabled()).toEqual(false);  
  5. }) 

当我们开始输入时启用保存按钮

只用当我们开始输入待办事项标题时，待办事项保存按钮才被启用。

  1. it("should only enable save todo button when we start typing a new todo title", () => {  
  2. browser.get("/");  
  3. let newTodoSubmitButton = element(by.css(".add-todo input[type=submit]"));  
  4. let newTodoInputField = element(by.css(".add-todo input[type=text]"));  
  5. newTodoInputField.sendKeys("New Todo 4");  
  6. expect(newTodoSubmitButton.isEnabled()).toEqual(true); 
  7. }) 

结论

现在，我们来总结一下 Angular2 的“端对端”测试。即使您没有任何的编程基础，也可以快速上手编写“端对端”测试。对于那些被引入代码库而又可能存在漏洞的部分，“端对端”测试是一个高效便捷的方法来捕获问题所在。

我们在概念部分中介绍了一些其他方法。您可以点击这里来浏览这些 Protractor API。并且可以在 GitHub repository 上找到这个应用的完整版和测试版。

我希望您看完这个介绍之后，在您修改任何一行代码之前都能兴奋的开始您的前端应用测试。如果您高兴，和我们交流一些您在日常测试中的高见。或者是您关于 Javascript 框架及 Angular2 的想法。感谢您的阅读。

【编辑推荐】

  1. 微软与Google达成JavaScript框架合作：将共同打造Angular 2
  2. Angular 2对React：究竟孰优孰劣？
  3. 基于Angular 2 CLI开发CRUD应用程序

阅读全文
0 0
网络统考app 网络统考app
原创粉丝点击
热门IT博客
淘宝开通物流服务商淘宝开通物流服务商
电陶炉好用吗 知乎电陶炉好用吗 知乎
创维电视mac地址
网络运维招聘
淘宝快速取词
天下3 mac版
金十数据"
淘宝关于色差的解释
压实度计算软件
mysql mongodb 迁移
手机简单制图软件
php上传图片到数据库
angularjs 数组合计
云盘搭建php源码
买大数据
攻击服务器软件
mac os cdr下载
java开发erp系统难不难
联通营业厅客户端软件
手机之间蓝牙共享网络
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 珊瑚绒静电怎么办 法兰绒起静电怎么办 四件套静电怎么办 床单带静电怎么办 睡衣有静电怎么办 毛线衣黑色褪色怎么办 貂毛毛衣掉毛怎么办 毛衣已经掉色怎么办 貂毛衣服掉毛怎么办 毛衣脱色严重怎么办 毛衣掉毛太严重怎么办 毛衣掉毛怎么办 针织衣起球怎么办 珊瑚绒掉毛怎么办 珊瑚绒被掉毛怎么办 珊瑚绒毯子掉毛怎么办 法兰绒掉毛怎么办 高跟鞋不舒服怎么办 胳膊粗怎么办 胳膊肘发黑粗糙怎么办 黑色运动鞋发白怎么办 黑绒面鞋泛白怎么办 黑色鞋子发白怎么办 绒面鞋掉色怎么办 绒面鞋用水洗了怎么办 皮鞋划破了怎么办 丝棉袄洗后结团怎么办 戒面松了怎么办 刷鞋后发黄怎么办 冬季头发静电怎么办 裤子上粘毛怎么办 指甲印花印不上怎么办 印花板印不上怎么办 扫描仪卡纸怎么办图解 面料上有胶点怎么办? 抓绒衫起球了怎么办 绒衣服掉毛怎么办? 大衣面料褪色怎么办 卫衣掉毛严重怎么办 毛绒卫衣掉毛怎么办 毛呢掉毛怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里