从零开始掌握微服务软件测试-端到端测试的优化策略

　　从零开始掌握微服务软件测试-端到端测试的优化策略

　　上篇文章中的契约测试解决了我们对微服务之间协作、交互的验证需求。本系列到目前为止介绍的测试都是后端或者 API 级别的测试，可以说都属于“白盒测试”。自动化测试的最后一步，就是所谓的端到端测试（End-to-End Test），又称黑盒测试，即从用户角度验证整个系统的功能，看其从启动到结束是否全部符合用户预期。

　　黑盒测试：又被称为功能测试、数据驱动测试或基于规格说明的测试，是通过使用整个软件或某种软件功能来严格地测试， 而并没有通过检查程序的源代码或者很清楚地了解该软件的源代码程序具体是怎样设计的。测试人员通过输入他们的数据然后看输出的结果从而了解软件怎样工作。简单来说，它的测试视角是从最终用户出发，对系统的底层实现一无所知。

　　本文首先将讲解端到端测试的主要方法，包括配置步骤和测试用例的编写等。但是正如很多读者经常遇到的，UI 测试常常是非常脆弱、不稳定的，往往会因为一点点 UI 的变化而失败。为了确保端到端测试起到既能弥补其他测试的不足，又不会经常导致误报的作用，本文还将着重分析一些优化端到端策略的方法。

　　端到端测试的实施方法

　　UI 测试的框架和工具目前有很多。本文将着重以网页端的端到端测试为例。按照 GitHub 上的 Star（点赞）数目排名，目前最靠前的五个端到端测试框架为：

　　本文将选用 AngularJS 团队所发布的 E2E 测试框架 Protractor，过程如下图所示:

　　

　　实施步骤主要分为以下几步：

　　编写配置文件和基于 Jasmine/Mocha/Cucumber 的测试用例；

　　使用 Protractor 作为执行框架；

　　调用 Selenium Server/chrome Driver，启动浏览器进程；

　　从浏览器执行测试用例，检查 AngularJS 应用程序的结果是否符合预期。

　　下面将逐步加以介绍。

　　Protractor 简介

　　Protractor 是 AngularJS 团队发布的一款开源的端到端网页测试工具，可以说是专门为 Angular 定制，内置了各种可以选择、操作 Angular 元素的便捷方法。如果基于 Angular 开发，使用它可以减少很多重复代码。

　　Protractor 的主要特点有：

　　Jamine 是一个由行为驱动的 JavaScript 代码测试框架，不依赖于任何其他 JavaScript 框架，也不需要使用 DOM。它的语法非常简单、清晰，非常便于撰写测试用例。一个典型的 Jammine 测试用例如下：

　　

　　其主要功能有：

　　环境安装主要有以下几步：

　　npminstallprotractor -g

　　webdriver-managerupdate// 浏览器驱动

　　webdriver-managerstart

　　默认情况下，Selenium 测试服务器接入地址为：:4444/wd/hub。

　　npminstall protractor-jasmine2-html-reporter -g

　　npminstall jasmine-reporters -g

　　由于需要在 config 文件中加载。一般把这两个插件放在根目录的 node_modules 目录下

　　配置文件

　　配置文件位于根目录下，默认命名为 protractor.config.js，举例如下：

　　

　　编写测试用例

　　测试用例的作用主要是：

　　查找页面元素

　　首先，介绍针对浏览器的常用操作：

　　

　　其次是定位页面元素，Pratractor 支持用 by.binding 定位元素，又称为定位器 locator。Protractor 中常用的定位器有如下几种：

　　“class” 是 DOM 元素上的一个属性。在实践中，通常是多个 DOM 元素有同样的 class 名，所以通常用它来查找多个元素。

　　HTML 代码如下:

　　

　　测试用例如下：

　　

　　根据元素标签名查找。

　　HTML 代码如下:

　　

　　测试用例如下：

　　

　　查找 name 属性匹配的表单元素。

　　HTML 代码如下：

　　

　　测试用例如下：

　　

　　查找链接文字匹配的链接元素。

　　HTML 代码如下：

　　

　　测试用例如下：

　　

　　查找链接文字部分匹配的链接元素。

　　HTML 代码如下:

　　

　　测试用例如下：

　　

　　正如名字所表明的，它通过 CSS 来定位元素。默认使用浏览器本地支持的选择器，可参考 W3C 的 CSS 选择器。如果浏览器默认不支持 CSS 查询，则使用 Sizzle。IE6、7 和 Firefox 3.0 都使用了 Sizzle。注意使用 CSS 选择器不能保证在所有浏览器里都表现一样，有些在某些浏览器里工作良好，在另一些浏览器里可能无法工作。

　　HTML 代码如下:

　　

　　测试代码如下：

　　更多定位器请见参考资料。

　　这是最高效也是首选的方法用于查找一个元素。UI 开发人员常犯的错误是，要么没有指定 id，要么自动生成随机 id，这两种情况都应避免。即使是使用 class 也比使用自动生成随机 id 要好的多。

　　操作定位到的页面元素

　　Protractor 中使用 element(locator) 和 element.all(locator) 来定位元素，前者是定位单个元素，后者是定位所有符合条件的元素。第一个方法如果找到则返回该元素，如果没找到则抛出异常。第二种如果找到则返回一个包含所有元素的列表，如果没找到则返回一个空数组。

　　定位到元素后能做哪些操作？常用操作举例如下：

　　

　　关于 sendkeys 的使用，注意还可以支持下列键盘操作：

　　操作效果

　　sendKeys(protractor.Key.CONTROL, 'a')

　　全选

　　sendKeys(protractor.Key.CONTROL, 'c')

　　复制

　　sendKeys(protractor.Key.CONTROL, 'v')

　　粘贴

　　sendKeys(protractor.Key.CONTROL, 'x')

　　剪切

　　下面，我们就可以编写一个实际的测试用例了。下面假设有一个本地的 Web 服务器，打开浏览器之后登录，然后验证一些特定信息是否符合预期，保存为 tc/e2e/scan.js。

　　

　　执行 Protractor

　　

　　调试技巧

　　

　　

　　优化策略

　　虽然端到端测试可以彻底检查整个系统是否符合用户预期，但是很多人都会感觉到，这样的测试很容易失败，因为即使前端有一些微小的改动或者调整，都会导致很多测试用例的失效。因此，总结下面这几点优化策略：

　　下面是一个 Page Object 的例子：

　　

　　然后在主测试用例文件中，用下面的方式调用：

　　

　　

　　那么，如果只运行跟主页有关的测试，只需要执行：

　　

　　总结

　　本文介绍了端到端测试的主要方法和优化策略，让您可以快速地开始对前端程序进行自动化黑盒测试。

　　主要方法有：

　　优化策略有：

　　到目前为止，我们已经覆盖了“自动化测试金字塔”的大部分内容。下一篇，我们将会介绍目前测试领域的两个新热点：云端测试和性能测试。