过去我一直不愿意在我的应用程序中添加自动化测试的原因有很多。一个原因是收益成本比未知，另一个原因是可能很难将应用程序集成到现有的生产环境中。您如何在不从头重构代码的情况下仅通过引入测试来测试应用程序？让我们从简单区分测试类型开始。应用程序测试有多种类型，但最常见的是单元测试和端到端测试（也称为集成测试）。单元测试是测试代码本身行为的测试。从用户的角度来看什么都不做，但确保它的方法按预期进行。集成测试是一种模仿用户行为的测试。例如，登录系统、创建帖子、退出系统等操作都可以自动化，你可以用眼睛看到这个过程是如何发生的。这两种类型的测试经常相互结合使用。对于新的开发，这将是理想的。如果时间有限，或者在继承现有项目的情况下，端到端测试可能比单元测试更合适。因为我们不需要对前面的代码库了解太多，我们也可以覆盖更多的场景，这样会比单元测试更快，因为单元测试不是测试单个单元，而是测试整个场景。单元测试仍然很重要，但如果您必须选择一个开始，我认为端到端测试将是更好的选择。在本文中，我将测试现有的Angular2待办项目。我将使用集成测试并涵盖一系列场景。如果您需要熟悉Angular2入门，请参阅Jscrambler的Angular2文章。测试场景应用初始化加载时，有3个待办事项需要加载。点击一个待办事项，即可跳转到该待办事项的详细页面。删除待办事项。编辑待办事项标题。然后保存后可以看到新标题不允许在首页的待办事项列表中保存一个空的待办事项。点击已禁用的保存按钮后，待办事项列表仍为首页首次加载时的原始总数，添加新待办事项的按钮应该被禁用，保存待办事项的按钮应该只在为待办事项输入标题后处于编辑状态Todo应用程序概述让我们简要描述一下TODO应用程序。该应用程序将从主页上的待办事项列表开始。详细列出了三个待办事项。该写入数据不会由服务器提供，而是从硬编码的设备文件中加载。在主页上，我们可以添加新的待办事项。我们可以通过单击标题访问待办事项的详细信息页面。在这个页面我们可以编辑待办事项的标题或者删除待办事项。克隆并设置Todo应用程序1.首先克隆我已推送到此处存储库的未经测试的应用程序，确保您是从master分支克隆的。接下来，您需要安装一些工具才能执行以下操作。本教程使用Candidate已经发布的Angular2，版本为2。2.确保你安装的NodeJS版本为Node4.x.x或更高版本。3.使用npminstall安装节点依赖项当然在克隆的存储库中运行4.使用Angular-CLI进行开发。使用以下命令全局安装Angular-CLI：npminstall-gangular-cli@latest5。Angular2端到端测试使用称为量角器的工具运行。使用以下命令全局安装量角器：npminstall-gprotractor6.安装所有依赖项后，使用以下命令启动开发服务器：ngserve然后导航到浏览器地址：http://localhost:4200，您将看到三个待办事项列表.如果你启动服务器有问题，可以参考stackoverflowissue解决问题。与Angular2测试相关的重要概念端到端测试文件夹位于e2e中。其中有一个名为es2/app.e2e-spec.ts的准备好的规范文件。里面的测试文件是用jasmine框架开发的。模块化和组织Angular2端到端测试的方法有很多种，但这里为了方便起见，本文将在一个文件中完成。我们的应用程序只有一个功能，那就是待办事项列表。为了满足大家的好奇心或者有人在想比上面更复杂的情况，想象一个场景，需要测试订单、用户配置等功能，应用更复杂。对于这个测试场景，我会在e2e文件夹中为每个需要测试的功能创建一个文件夹，并将各自的测试文件放入其中。在这种情况下，我们将有两个名为e2e/orders和e2e/userProfile的文件夹。每个文件夹下只会有一个测试文件，也可以创建多个测试文件，以满足需要测试更多功能的需要。需要注意的一件事是每个测试文件都以单词e2e-spec.ts结尾，以便可以将Protractor测试工具加载到其中。好的，回到我们简单的单一测试文件。如果稍微看一下这个文件，您会发现文件顶部有一个import语句。导入声明了几个测试文件中使用的通用函数的来源。但是，在本文中，我们不会使用它，而是将其视为一个函数库。在import语句之后，我们有一个描述性代码块，其中包含两个函数调用，即beforeEach和其中的回调。在describe块中，传递给beforeEach的每个回调都需要进行测试。然后每个测试都会在其中传递回调函数。让我们使用命令protractor运行当前测试如果您在运行protractor的两个命令之一时遇到问题，请参阅此处。./node_modules/protractor/bin/webdriver-managerupdate或webdriver-managerupdate如果当前测试失败，您可能会在首页看到类似“appworks”的文字提示。不是这样的，因为我们修改了主页的内容。在我们开始编写测试之前，让我们了解一些重要的常用功能和Angular2的端到端测试。导航到页面在测试文件中，有一个浏览器全局变量。它使用import语句import{browser,element,by}from'protractor/globals';您现在可以添加。例如，我们使用browser.get('/');导航到您的应用程序中可用的任何页面。到您的主页，然后browser.get('/users');到用户页面。请注意，这些网址是相对网址，我们也可以使用绝对网址，但我建议使用相对网址，因为如果您的域名发生变化，这样更容易维护。通常选择元素的方式是选择当前页面上的元素。您可以通过名为element的全局变量来选择元素。它接受可以使用全局创建的定位器。使用带有绿色类别的selectp标签的示例如下letgreenParagraph=element(by.css('p.green'));选择多个元素，一些细微的变化letgreenParagraphs=element.all(by.css('p.green'));这将给出一个数组而不是单个元素。抓取元素文本要获取元素的文本，您必须首先选择它然后调用getText方法，如下所示。letgreenParagraph=element(by.css('p.green'));lettext=greenParagraph.getText();单击元素单击元素可以使用以下语法完成letsubmitButton=element(by("form.submit-button"));submitButton.click();统计元素我们也可以使用下面的语法来统计元素的数量。letblueParagraphsList=elements.all(by("p.blue"));letcount=blueParagraphsList.count();测试场景测试场景对于那些不太常见的概念，我们列出了上面涵盖的场景。确定要做的前三件事首次加载应用程序时，我们要做三件事。在测试文件e2e/app.e2e-spec.ts中，beforeEach代码块下方，删除调用它的函数，并添加它("shouldshowthreetodoswhenwefirstloadthetodoapp",()=>{browser.get("/");lettodos=element.all(by.css(".todos.todo"));expect(todos.count()).toEqual(3);})不要忘记在顶部添加这个导入语句import{browser这个文件，元素，来自'protractor/globals';现在，当你运行protractor命令时，另一个浏览器将打开并快速关闭，在你的控制台上你可以看到它通过测试时显示为绿色。好的！我们刚刚编写了第一个通过Angular2的端到端测试。添加一个新的待办事项现在进入下一个，我们可以添加一个待办事项。让我们用下面的代码添加一个测试块it("shouldbeabletoaddanewtodo",()=>{browser.get("/");letnewTodoInput=element(by.css(".add-todoinput[type=text]"));newTodoInput.sendKeys("Todo4");letnewTodoSubmitButton=element(by.css(".add-todoinput[type=submit]"));newTodoSubmitButton.click();lettodos=element.all(by.css(".todos.todo"));expect(todos.count()).toEqual(4);})我们在这里要做的是在待办事项输入框中输入文本并提交表单。然后我们检查是否有四个待办事项。如果是，则测试通过。我们刚刚介绍了另一个函数sendKeys，它可以访问一个被选中的元素，这个函数常用于向输入框等元素中输入文本。查看待办事项的详情页我们应该可以点击一个待办事项进入到该待办事项的详情页，下面通过测试来实现。it("shouldbeabletoclickonatodoonthehomepageandgettothedetailspage",()=>{browser.get("/");letfirstTodo=element.all(by.css(".todos.todo")).first();letfirstTodoText=firstTodo.getText();firstTodo.click();letinputFieldText=element(by.css("todoinput[type=text]")).getAttribute("value");expect(inputFieldText).toEqual(firstTodoText);})删除待办事项我们应该能够删除待办事项。现在让我们尝试删除一个待办事项，看看它是否有效。我们将转到待办事项页面并单击删除链接，当我们返回主页时，我们可以看到少了一个待办事项。it("shouldbeabletodeleteatatodo",()=>{browser.get("/");letfirstTodo=element.all(by.css(".todos.todo")).first();firstTodo.click();letdeleteLink=element(by.cssContainingText("span","Delete"));deleteLink.click();lettodosList=element.all(by.css(".todos.todo"));期望(todosList.count()).toEqual(2);})编辑待办事项的标题我们可以对待办事项的标题进行编辑，保存后新的标题可以显示在首页的待办事项列表中.it("应该可以编辑todotitle",()=>{browser.get("/");letfirstTodo=element.all(by.css(".todos.todo")).first();firstTodo.click();lettodoInputField=element(by.css("todoinput[type=text]"));todoInputField.clear();todoInputField.sendKeys("EditedTodo1Title");letsaveButton=element(by.css("todobutton[type=提交]"));saveButton.click();firstTodo=element.all(by.css(".todos.todo")).first();letfirstTodoText=firstTodo.getText();expect(firstTodoText).toEqual("EditedTodo1Title");})不能保存一个空的待办事项当我们想保存一个空的待办事项时，我们做不到，当禁用按钮被点击时，待办事项列表保持相同的长度。it("shouldnotbeabletosaveanemptytodo",()=>{browser.get("/");letnewTodoInput=element(by.css(".add-todoinput[type=text]"));letnewTodoSubmitButton=element(by.css(".add-todoinput[type=submit]"));newTodoSubmitButton.click();lettodos=element.all(by.css(".todos.todo"));expect(todos.count()).toEqual(3);})Thesavebuttonisdisabledatinitialization添加todo按钮在初始化时被禁用，所以我们添加如下代码it("shouldhaveaddtodobuttonbedisabledinitially",()=>{browser.get("/");letnewTodoSubmitButton=element(by.css(".add-todoinput[type=submit]"));expect(newTodoSubmitButton.isEnabled()).toEqual(false);})Enablethesavebuttonwhenwestarttypingonlywhenwestarttypingtodos的待办事项保存按钮仅在显示项目标题时启用。it("shoulddonlyenablesavetodobuttonwhenwestarttypinganewtodotitle",()=>{browser.get("/");letnewTodoSubmitButton=element(by.css(".add-todoinput[type=submit]"));letnewTodoInputField=element(by.css(".add-todoinput[type=text]"));newTodoInputField.sendKeys("NewTodo4");expect(newTodoSubmitButton.isEnabled()).toEqual(true);})Conclusionpeer"测试。即使你不这样做有任何编程背景，都可以快速开始编写“端到端”测试。对于那些引入代码库、可能存在漏洞的部分，“端到端”测试是一种高效便捷的捕获方式问题。我们在概念部分介绍了一些其他方法。您可以在这里浏览这些量角器API。可以在GitHub存储库上找到该应用程序的完整版和测试版。我希望在阅读本介绍后，您会很兴奋在更改一行代码之前开始测试您的前端应用程序。如果您满意，请与我们分享您对da的一些想法简单地测试。或者你对Javascript框架和Angular2的看法。谢谢阅读。
