之前的兩篇文章從理論的角度分別介紹了E2E（End to End）測試的演進[1]以及E2E測試的常用工具codeceptjs[2]，本篇文章從實戰的角度出發描述了一個基本的codecept框架是如何搭建起來的。出於篇幅考慮，本文僅關注codeceptjs最基本的一些內容，即如何啓動一個頁面。關於其他的特性，如數據管理，helper擴展，report，PageObject等，將在以後的文章中分別探討。另外本文介紹的框架是基於WebDriverIO的，因爲這是比較常用的backend。最後，相關代碼可以在github[3]上找到。值得注意的是，代碼採用了codeceptjs1.1.5版本，主要有連個原因。首先，我們項目開始的比較早，在開始的時候1.1.5所以比較穩定的版本；其次，1.1.5已經可以解決大部分的問題。
1. 安裝codeceptjs，同時爲其配置webdriverIO的庫。
npm install codeceptjs webdriverio --save-dev
命令成功執行之後，在當前目錄將生成一個package-lock.json文件。這個文件由npm生成，用於描述npm爲當前工程生成的dependencies樹。通常要commit到source repo中去。這個文件將作爲項目的基線，開發和測試人員都可以把它作爲參考，安裝相同的dependencies。同時可以對其進行版本控制，以便追溯dependencies 樹變更的過程[4]。
2. 在當前目錄初始化codeceptjs
npx codeceptjs init
併爲其選擇webdriverIO
npx相當於$ node-modules/.bin/codeceptjs。Npx是npm提供的一個工具庫，最早引入於npm5.2.0 [5]。
3. 建立你的第一個測試case
npx codeceptjs gt
4. 寫下第一個scenario
Feature('First test.e2e.js');
Scenario('test something', (I) => {
I.amOnPage('http://www.baidu.com');
});
5. 準備Selenium Server
npm install selenium-standalone@latest -g
selenium-standalone install && selenium-standalone start
這只是selenium server啓動的一種方式[7]，在最新版本的codeceptjs中，已經支持將selenium server配置成plugin自動啓動和關閉[8]。
6. 啓動第一個case
npx codeceptjs run --steps
至此，一個簡單的codeceptjs測試框架就搭建完成了。詳細的說明可以參考codeceptjs的官網[9]。
[1] https://www.jianshu.com/p/61a0e2b0925e
[2] https://www.jianshu.com/p/39908e14adf9
[3] https://github.com/yangzhao1983/codeceptjs_framework
[4] https://docs.npmjs.com/files/package-lock.json
[5] https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner
[6] https://www.npmjs.com/package/selenium-standalone
[7] https://www.npmjs.com/package/selenium-standalone
[8] https://codecept.io/quickstart#using-selenium-webdriver
[9] https://codecept.io/quickstart#using-selenium-webdriver