共 7717 字，讀完需 10 分鐘，速讀需 5 分鐘，適合中高級前端工程師，本文對主流的 E2E 測試框架做了簡單對比，期望對大家的技術(shù)選型有幫助。

測試，尤其是自動(dòng)化測試在現(xiàn)代 WEB 工程中有著非常重要的角色，與交付過程集成良好的自動(dòng)化測試流程可以在新版發(fā)布時(shí)幫你快速回歸產(chǎn)品功能，也可以充當(dāng)產(chǎn)品文檔。測試因粒度不同又可以分為單元測試、接口測試、功能測試。在 WEB 領(lǐng)域，功能測試亦稱為端到端測試（End to End Test，簡稱 E2E 測試），筆者在本文中會結(jié)合自身實(shí)踐和 GitHub 趨勢對比最受歡迎的 Node.js E2E 測試解決方案，首先我們按 GitHub 的 star 總數(shù)量排序，取前 5 名列舉如下（注意：你閱讀本文時(shí) star 的數(shù)量可能已經(jīng)不是最新的）。

• CasperJS — 6460 個(gè) star，官網(wǎng)，代碼，最近更新于 7 天前；
• Protractor — 6408 個(gè) star，官網(wǎng)，代碼，最近更新于 10 天前；
• Nightwatch.js — 6121 個(gè) star，官網(wǎng)，代碼，最近更新于 6 天前；
• TestCafe — 2268 個(gè) star，官網(wǎng)，代碼，最近更新于 1 天前；
• CodeceptJS — 1087 個(gè) star，官網(wǎng)，代碼，最近更新于 7 天前；

然后分別從環(huán)境搭建、測試編寫、測試報(bào)告等方面來直觀展示這 5 個(gè) E2E 測試框架，期望能夠?qū)ψ鰷y試框架選型的同學(xué)有幫助。為了更客觀的體現(xiàn)各測試框架的特點(diǎn)，筆者設(shè)計(jì)了一些包含 E2E 測試中常用操作的測試用例，分別使用不同的框架來編寫。E2E 測試的常用操作如下：

• 打開網(wǎng)頁，跳轉(zhuǎn)網(wǎng)頁：打開 Github 的首頁；
• 填寫輸入框，提交表單：鍵入搜索詞，提交搜索表單；
• 元素單擊等操作：單擊搜索結(jié)果的第一項(xiàng)；
• 元素?cái)?shù)量、屬性檢視：確認(rèn)搜索結(jié)果展示了 10 條；
• 頁面運(yùn)行環(huán)境檢視：確認(rèn)頁面的地址是正確的；

CasperJS

CasperJS 是 star 數(shù)最高的測試框架，也是筆者最早開始采用的 E2E 測試框架，使用 Python 編寫，雖不算是嚴(yán)格意義上的原生 Node.js 解決方案，但因?yàn)槟軌蚴褂?npm 安裝，且能夠很好的與 Node.js 工具鏈組合使用，筆者還是把它列在了這里。其特別之處在于只能與無界面瀏覽器（Headless Browser）組合使用，比如 PhantomJS 和 SlimerJS，這也讓 CasperJS 的優(yōu)勢顯而易見：測試運(yùn)行速度比真實(shí)瀏覽器快不少，且你不需要在持續(xù)集成系統(tǒng)中安裝各種瀏覽器或者某個(gè)瀏覽器的不同版本；潛在的坑在于，無界面瀏覽器的表現(xiàn)有時(shí)和真實(shí)瀏覽器不完全相同，會帶來某些難以排查解決的瀏覽器兼容問題。

安裝步驟

• 安裝 Python 2.6 或更高版本
• 安裝 PhantomJS：npm install -g phantomjs
• 安裝 CasperJS：npm install -g casperjs

編寫測試

如果使用 ES6 之前的風(fēng)格來編寫 CasperJS 測試，代碼看起來會顯得非常臃腫，而實(shí)際上 CasperJS 也不支持任何 ES6/ES7 的新語法，除非你在運(yùn)行測試之前自己對代碼進(jìn)行預(yù)編譯，實(shí)際代碼如下：

casper.test.begin('Github Search', function suite(test) {
    casper.start('https://github.com', function () {    // 打開首頁
        test.assertVisible('.js-site-search-form', 'should search input visible');
        this.fill('.js-site-search-form', { q: 'casperjs' }, true); // 鍵入搜索詞、并提交
    });

    casper.then(function () {
        test.assertEval(function() {    // 確認(rèn)搜索結(jié)果是 10
            return __utils__.findAll('.repo-list-item').length >= 10;
        }, 'should show 10 results');
    });

    casper.then(function () {
        this.click('.repo-list-item h3 a'); // 點(diǎn)擊第1條結(jié)果
    });

    var location = null;

    casper.then(function () {   // 這里是取環(huán)境變量
        test.assertVisible('.repository-content', 'should repo detail visible');
        location = this.evaluate(function () {
            return window.location;
        });
    });

    casper.then(function () {   // 確認(rèn)目前跳轉(zhuǎn)到了 casperjs 官方倉庫
        test.assertEquals(location.pathname, '/casperjs/casperjs', 'should casperjs repo found');
    });

    casper.run(function () {
        test.done();
    });
});

因?yàn)?CasperJS 對 CoffeeScript 有天然的支持，熟悉 CoffeeScript 的同學(xué)可以嘗試使用 CoffeeScript 編寫測試，或者使用這個(gè)工具轉(zhuǎn)換為 CoffeScript。

運(yùn)行測試

casperjs test casperjs/test.js

查看報(bào)告

測試通過

測試失敗

Protractor

Protractor 是 Angular 官方正在使用的 E2E 測試框架，可以說是專門為 Angular 定制，內(nèi)置了各種可以選擇、操作 Angular 元素的便捷方法，如果你的應(yīng)用基于 Angular 開發(fā)，使用它可以減少很多重復(fù)代碼（顯然類似的便利在其他框架中也有支持）。對于 Angular 的重度使用者，Protractor 會是非常明智的選擇，不同于 CasperJS 的是 Protractor 在真實(shí)瀏覽器中運(yùn)行測試代碼。此外，Protractor 內(nèi)置的頁面加載等待的功能，在 CasperJS 中需要自己設(shè)置合理的超時(shí)。相比于本文列出的其他框架，Protractor 的明顯優(yōu)勢是測試用例的組織方式可以自由使用 Jasmine 或者 Mocha。

安裝步驟

• 安裝 JDK
• 安裝 Protractor：npm install –g protractor
• 初始化 WebDriver Manager：webdriver-manager update
• 創(chuàng)建配置文件

編寫測試

Protractor 默認(rèn)開啟了等待 Angular 加載并初始化完成的功能，如果你測試的不是 Angular 應(yīng)用，則需要關(guān)閉這個(gè)功能，測試代碼示例如下：

describe('angularjs homepage todo list', function () {
    browser.ignoreSynchronization = true;   // 不啟用智能等待，因?yàn)?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();
        });
    });
});

運(yùn)行測試

• 運(yùn)行 WebDriver Manager: webdriver-manager start
• 運(yùn)行測試：protractor protractor.config.js

查看報(bào)告

測試通過

測試失敗

Nightwatch

同樣流行的 Nightwatch，可以認(rèn)為是 Protractor 的主要競爭對手，使用 Nigthwatch 編寫的代碼非常簡潔，但是你需要手動(dòng)在測試代碼中添加合適的等待來保障測試的穩(wěn)定，而 Protractor 和 TestCafe 則提供了內(nèi)置的支持；Nightwatch 的主要劣勢在于繁瑣的安裝步驟，可能部分同學(xué)看到這個(gè)安裝文檔或者下面的安裝步驟就知難而退了。

安裝步驟

• 安裝 JDK，版本 7 以上
• 下載 Selenium: selenium-server-standalone-{VERSION}.jar，復(fù)制到測試目錄
• 下載 WebDriver for Google Chrome，復(fù)制到測試目錄
• 安裝 Nightwatch: npm install -g nightwatch
• 創(chuàng)建配置文件，需要在配置中聲明 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 () {   // 確認(rèn)展示 10 條搜索結(jié)果
            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) {    // 確認(rèn)打開了 nightwatch 官網(wǎng)
            browser.assert.equal(args.value.pathname, '/nightwatchjs/nightwatch', 'should nightwatch repo found');
        });

        browser.end();
    }
};

運(yùn)行測試

• 運(yùn)行 Selenium：java -jar selenium-server-standalone-3.0.0.jar
• nightwatch test.js

查看報(bào)告

測試通過

測試失敗

TestCafe

TestCafe 是非常年輕但很受開發(fā)者歡迎的測試框架，因?yàn)椴恍枰蕾?WebDriver 之類的東西，TestCafe 環(huán)境只需一鍵即可完成，這也意味著，你可以在任何安裝了瀏覽器應(yīng)用的物理設(shè)備上運(yùn)行測試。TestCafe 對 ES6/ES7 語法的天然支持讓它更具前瞻性，命令行工具產(chǎn)生的測試報(bào)告簡潔但不失完整。由于開源的時(shí)間較短，相比于其他測試框架 TestCafe 的社區(qū)和生態(tài)還不夠成熟。盡管如此，不斷出現(xiàn)的各種 TestCafe 功能擴(kuò)展也證明了它的社區(qū)和生態(tài)在不斷壯大。對于站在 WEB 技術(shù)風(fēng)口浪尖的同學(xué)，TestCafe 無疑是非常值得留意的 E2E 測試解決方案，開箱即用的特性極大的降低了使用者的成本。

安裝步驟

npm install testcafe -g

編寫測試

TestCafe 的測試組織方式詳見這里，選擇符支持也非常強(qiáng)大，支持類似于 jQuery 的靈活異步的選擇符，斷言風(fēng)格非常類似 Chai，下面是測試代碼：

import { Selector } from 'testcafe';

fixture `Github Search`
    .page `https://github.com`;

test('should github search work as expected', async t => {
    const searchInput = Selector('.js-site-search-focus');
    const searchList = Selector('.repo-list-item');
    const resultItem = Selector('.repo-list-item h3 a');
    const repoContent = Selector('.repository-content');

    await t.setTestSpeed(0.8);
    await t.expect(searchInput.exists).eql(true, 'should search input visible');
    await t.typeText(searchInput, 'testcafe');
    await t.pressKey('enter');

    await t.expect(searchList.count).eql(10, 'should show 10 results');
    await t.click(resultItem);

    await t.expect(repoContent.exists).eql(true, 'should repo detail visible');

    const location = await t.eval(() => window.location);
    await t.expect(location.pathname).eql('/DevExpress/testcafe', 'should testcafe repo found');
});

運(yùn)行測試

testcafe chrome testcafe/test.js

查看報(bào)告

測試通過

測試失敗

CodeceptJs

CodeceptJs 可能并不算是嚴(yán)格意義的 E2E 測試框架，它對各種測試運(yùn)行工具做了一層封裝，旨在提供更簡潔的 API，你可以自由選擇下面這些測試運(yùn)行工具：

• WebDriverIO
• Protractor
• Selenium WebDriver JS
• NightmareJS

CodeceptJs 讓筆者比較欣賞的地方在于測試用例的組織，基于 Feature 和 Scenario 兩個(gè)粒度來組織測試讓它看起來更有 E2E 測試的樣子，它支持最新的 ES6 語法，同時(shí)也屏蔽各種復(fù)雜的回調(diào)細(xì)節(jié)，所有的測試用例都是以第一人稱來做，讓測試代碼閱讀起來更像是自然語言，而讓筆者擔(dān)憂的地方在于，過多的封裝可能導(dǎo)致出問題時(shí)排查比較困難。

安裝步驟

• 安裝 CodeceptJs npm install -g codeceptjs
• 用命令行工具初始化配置 codecept.json：codeceptjs init
• 使用命令行工具生成測試：codeceptjs gt
• 此外，你需要安裝你所選擇的底層測試工具，比如 WebDriver、Protractor

編寫測試

Feature('Github Search');

Scenario('search codecept repo', (I) => {
    I.amOnPage('https://github.com');
    I.seeElement('.js-site-search-focus');
    I.fillField('.js-site-search-focus', 'codeceptjs');
    I.pressKey('Enter');

    I.seeElement('.repo-list-item');
    I.click('.repo-list-item h3 a');
    I.seeElement('.repository-content');
    I.seeInCurrentUrl('/Codeception/CodeceptJS');
});

運(yùn)行測試

codeceptjs run

查看報(bào)告

測試通過

測試失敗

總結(jié)對比

本文中的所有代碼可以在 GitHub 倉庫上看到。任何開發(fā)工具的演化都是朝著更快捷、高效的目標(biāo)。本文介紹的幾個(gè) E2E 測試框架可以說各有所長，在做框架選型的時(shí)候該考慮哪些因子呢？這些因子的優(yōu)先級如何？下面是筆者的考慮：

• 上手簡單：P0，環(huán)境搭建步驟？出錯(cuò)的概率？是否需要繁瑣的配置？TestCafe 非常簡單；
• 文檔支持：P0，是否包含入門文檔？API 參考？開發(fā)者文檔？本文中的五款都還不錯(cuò)；
• 過程透明：P0，測試運(yùn)行過程是否是透明的，能否觀察到頁面行為？CasperJS 就像個(gè)黑盒；
• 運(yùn)行速度：P0，測試運(yùn)行速度能決定你 CI 流程的好壞；
• 測試報(bào)告：P0，是否支持多種報(bào)告？是否方便與 CI 流程集成？比如要支持 XML、JUnit 等格式輸出；
• 調(diào)試功能：P0，出錯(cuò)時(shí)提供的信息是否清晰？是否支持截圖？TestCafe 做的很好；
• 測試組織：P1，是否能與現(xiàn)有的技術(shù)棧很好的組合起來？不能結(jié)合獨(dú)創(chuàng)的方式是否直觀？如果是大型項(xiàng)目可以提高優(yōu)先級，Protractor 和 CodeCeptJs 占優(yōu)；
• 代碼風(fēng)格：P1，簡潔的代碼意味的更高的可讀性、更低的維護(hù)成本；TestCafe、CodeCeptJs 不錯(cuò)；
• 社區(qū)支持：P2，圍繞這個(gè)工具是否有成熟的社區(qū)？可以用來提問、貢獻(xiàn)代碼；
• 可擴(kuò)展性：P3，是否支持 API 擴(kuò)展？擴(kuò)展成本如何？

如果你的項(xiàng)目中需要添加 E2E 測試，做決定的時(shí)候沒有標(biāo)準(zhǔn)答案，因?yàn)檫€需要結(jié)合項(xiàng)目自身的特點(diǎn)，比如規(guī)模大小、對上面各因子的要求。

備注：本文的初始版本來源于 Medium 上的文章，但是筆者在原文基礎(chǔ)上重新設(shè)計(jì)了測試用例，每個(gè)測試框架的介紹也參與了筆者自身的使用經(jīng)驗(yàn)，框架選型上也融入了自己的思考，有興趣的可以去看原文。

One More Thing

本文首發(fā)知乎專欄，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。如果對文中的內(nèi)容有任何疑問，歡迎留言討論。想知道我接下來會寫些什么？歡迎訂閱知乎專欄：《前端周刊：讓你在前端領(lǐng)域跟上時(shí)代的腳步》。