之前的两篇文章从理论的角度分别介绍了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
Select_wdio.png
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
网友评论