《AngularJS深度剖析与最佳实践》一2.13　端到端测试

2.13　端到端测试

端到端测试（e2e test），也称为场景测试，它模拟的是用户真实的操作场景：
用户打开http://xxx地址。
在搜索框中输入了abc。
然后点击其后的搜索按钮。
这时候，他期望看到一个列表，列出所有在标题的任意位置包含了字符串abc的条目，并且每条结果中的abc这三个字母被高亮。
所谓端到端，也就是一端是浏览器，另一端是服务器，这个测试贯通了前后端，具有近似于验收测试的价值。
端到端测试不是什么新技术，它在前后端分离架构盛行之前就已经被广泛采用了，比如Selenium，而且Selenium也同样可应用于Angular中。
Angular的端到端测试工具称为Protractor，事实上，它就是基于Selenium的，在Selenium的基础上，它增加了一些Angular特有的元素选取方式，如根据ng-model选取元素等。
我的建议是，除非你所在的开发组织已经把Angular作为唯一的前端选项，否则请使用Selenium中传统的函数，而不要使用Protractor特有的根据ng-model选取元素等函数，这将让你们的测试独立于前端技术栈而被复用。
在我的工程实践中，只会使用id、class等少数查阅方式，而不会根据ng-model等进行查阅。并且，由于Angular的特点，被测试程序中可以不用任何id，所以，我们可以完全把id留给测试人员使用。如果写测试的人员有权修改源码，那么他/她可以自由的添加、删除id，而不用担心破坏了程序的逻辑和样式。遵循这个约定，可以让开发与测试的协同更加有效。
这里不展开讲解，只把我在种子工程中写的一些代码加上注释供大家自行研究：
1）pages/HomePage.js

// 这是一个页面对象，用来封装页面中的元素和操作，以简化规约代码，并提供一定的变更隔离
module.exports = function() {
    this.title = function() {
        // browser对象封装一组用来访问浏览器属性的函数
        return browser.getTitle();
    };
    // 根据id查找元素
    this.name = element(by.id('name'));
    this.nameEcho = element(by.id('name-echo'));
    this.get = function() {
        // 控制浏览器访问特定地址
        browser.get('http://localhost:5000/#/');
    };
};

2）demoSpec.js

// 取得页面对象
var HomePage = require('./pages/HomePage');

describe('e2e范例，如果修改了首页，请修改本测试 >', function () {
    var homePage;
    // 所有测试语句执行之前，先在浏览器中打开它
    beforeEach(function () {
        homePage = new HomePage();
        homePage.get();
    });

    it('默认的标题是Showcase', function() {
        expect(homePage.title()).toBe('Showcase');
    });
    it('输入用户名后应该回显', function() {
        // 检查初始状态是否符合预期
        expect(homePage.nameEcho.getText()).toBe('Hello,');
        // 模拟用户输入
        homePage.name.sendKeys('test');
        // 检查操作后状态是否符合预期
        expect(homePage.nameEcho.getText()).toBe('Hello,test');
    });
});