CodeceptJS入门

安装nodejs

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/

安装CodeceptJS

在常用的工作目录新建一个文件夹（eg：codeceptdemo），打开控制台cd到该目录，然后初始化npm

PS E:\Docoument> cd codeceptdemo
PS E:\Docoument\codeceptdemo> npm init -y
Wrote to E:\Docoument\codeceptdemo\package.json:
 
{
  "name": "codeceptdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
 
 
PS E:\Docoument\codeceptdemo>

安装CodeceptJS，如果安装特别慢，可以尝试执行（npm config set registry https://registry.npm.taobao.org）

PS E:\Docoument\codeceptdemo> npm install codeceptjs puppeteer --save-dev
npm WARN deprecated mkdirp@0.5.4: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
 
> puppeteer@3.3.0 install E:\Docoument\codeceptdemo\node_modules\puppeteer
> node install.js
 
Downloading Chromium r756035 - 144.6 Mb [====================] 100% 0.0s
Chromium (756035) downloaded to E:\Docoument\codeceptdemo\node_modules\puppeteer\.local-chromium\win64-756035
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ws@7.3.0 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.3.0 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN codeceptdemo@1.0.0 No description
npm WARN codeceptdemo@1.0.0 No repository field.
 
+ codeceptjs@2.6.5
+ puppeteer@3.3.0
added 339 packages from 739 contributors in 203.098s
 
19 packages are looking for funding
  run `npm fund` for details
 
PS E:\Docoument\codeceptdemo>

在当前目录中初始化CodeceptJS (use node node_modules/.bin/codeceptjs if you have issues with npx)

npx codeceptjs init

执行这个命令之后，会有一个提示

? Where are your tests located? (./*_test.js)

这个提示是设置名称是以_test.js结尾的都会被当成测试用例执行，也可以自己定义成其他的

然后按上下键选择其中一个

? What helpers do you want to use? (Use arrow keys)
> WebDriver
  Puppeteer
  TestCafe
  Protractor
  Nightmare
  Appium
  Playwright

这个需要按上下按键选择，这里我选的是Puppeteer
然后就会有第三个提示

? Where should logs, screenshots, and reports to be stored? (./output)

这个是日志、屏幕截图和报告存放的目录，也可以自定义，这里我就用默认output直接回车
选择执行过程日志的语言类型

? Do you want localization for tests? (See https://codecept.io/translation/) (Use arrow keys)
> English (no localization)
  pt-BR
  ru-RU
  it-IT
  pl-PL
  zh-CN
  zh-TW
(Move up and down to reveal more choices)

我选择zh-CN
输入需要测试网址

? [Puppeteer] Base url of site to be tested (http://localhost)

输入我们需要测试的网址https://***.com
选择是否打开浏览器

? [Puppeteer] Show browser window (Y/n)

这个是设置我们的浏览器是正常模式还是无头模式
设置浏览器大小

? [Puppeteer] Browser viewport size (1200x900)

根据需要设置，我写的是1920x1080
这个主要是用来说明我们要测试的功能，也就是测试用例的标题，可以随便起个名字，我写的loginaccount

? Feature which is being tested (ex: account, login, etc)

新建测试用例,这里就是测试用例的文件名，默认是Feature的名字加上之前设置的_test.js。然后新建就成功了

? Feature which is being tested (ex: account, login, etc) loginaccount
? Filename of a test (loginaccount_test.js)

第一个自动化脚本

在loginaccount_test.js编写测试用例

Feature('loginaccount');
Scenario('test something', (I) => {
    //在浏览器打开页面
    I.amOnPage('/user/login');
    //输入用户名密码
    I.fillField({css:'.input:not(:first-child)'},'176000000');
    I.fillField({css:'.input:not(:last-child)'},'123456')
    //点击登录按钮
    I.click({css:'button, [type="submit"]'})
    //判断成功登录Account
    I.see('乘法云')
    I.see('开通SaaS')
    //截图
    I.saveScreenshot("see-chengfayun.jpg")
});

输入执行命令，就可以看到执行结果

(base) E:\Docoument\codeceptdemo>npx codeceptjs run --steps
CodeceptJS v2.6.5
Using test root "E:\Docoument\codeceptdemo"
 
loginaccount --
  test something
    我 在页面 "/user/login"
    我 填写字段 {"css":".input:not(:first-child)"}, "176000000"
    我 填写字段 {"css":".input:not(:last-child)"}, "123456"
    我 单击 {"css":"button, html [type=\"button\"], [type=\"reset\"], [type=\"submit\"]"}
    我 看到 "乘法云"
    我 看到 "开通SaaS"
    我 保存屏幕截图 "see-chengfayun.jpg"
  √ OK in 4061ms
 
 
  OK  | 1 passed   // 5s
 
(base) E:\Docoument\codeceptdemo>