CodeceptJS介绍及使用

概述

CodeceptJS 是一个基于 Node.js的测试框架，用于进行端到端测试（End-to-End Testing）。它将浏览器交互抽象为简单直观的步骤，并可以在执行时通过传入--step参数输出它们，下面是一个简单的步骤示例。

less 复制代码

search --
  test something
    I am on page "https://baidu.com"
    I wait for element {"css":"input[id=kw]"}
    I fill field {"css":"input[id=kw]"}, "ghost"
    I click {"css":"input[type=submit]"}
    I see "百度为您找到以下结果"
  ✔ OK in 9876ms

可以看出每个步骤都是一个和浏览器交互的简单描述，十分易懂，同时如果哪一步失败了也会显示出来，因此问题定位也会极为迅速。

架构

CodeceptJS会将实际执行的指令委托给helper执行，每个helper都针对于CodeceptJS指定的接口有一套自己的实现，因此测试从一个helper迁移到另一个helper是非常容易的，但是需要注意的是由于每个helper的实现细节不同，测试文件可能会在迁移后无法在新的helper上顺利编译和执行，比如WebDriver不支持设置请求头，但是Playwright和Puppeteer支持。

下图来自于官网。

CodeceptJS 默认使用 Playwright 来在浏览器中运行测试，但也可以通过 WebDriver、Puppeteer 或 Appium 执行测试。

CodeceptJS的安装

本文使用Puppeteer作为helper来对CodeceptJS进行安装和使用

关于Puppeteer

Puppeteer（Puppeteer，即木偶，意为在其控制下的Chrome/Chromium浏览器宛如木偶）是一个 Node.js 库，它提供了一个高级的 API 来通过浏览器开发工具协议(DevTools Protocol) 控制Chrome/Chromium，比如用来生成页面的截图和PDF、爬取单页应用并生成预渲染内容、自动化表单提交、UI测试、键盘输入等。Puppeteer默认以headless（无头模式，即没有UI的模式）下运行，也可以配置成有UI的模式，在CodeceptJS的配置文件codecept.conf.js中可以进行相应的位置，后续会提及细节。

安装

shell 复制代码

mkdir ui-automation && cd ui-automation
npm init // 根据需要创建出一个package.json文件，或者直接加上-y参数创建出一个默认的package.json文件
npm install codeceptjs puppeteer --save
npx codeceptjs init // 初始化codeceptjs，主要是创建出一些常用文件，比如配置文件和steps_file文件，这里选择helper的时候选择puppeteer即可

这个时候的目录结构大致是这样的：

lua 复制代码

ui-automation
├── baidu-search_test.js
├── codecept.conf.js
├── jsconfig.json
├── node_modules
├── output
├── package-lock.json
├── package.json
├── steps.d.ts
└── steps_file.js

其中baidu-search_test.js是测试用例文件，codecept.conf.js是codeceptjs的配置文件，output是存放测试报告的目录，steps_file.js则是可以配置自定义的测试步骤。

编写测试用例并运行

baidu-search_test.js

javascript 复制代码

const constants = require('./constants')

Feature('search');

Scenario('test something',  ({ I }) => {
  I.amOnPage('https://baidu.com');
  I.waitForElement(constants.INPUT_BAIDU_SEARCH);
  I.fillField(constants.INPUT_BAIDU_SEARCH, 'ghost');
  I.click(constants.SUBMIT);
  I.see('百度为您找到以下结果');
});

可以看出测试用例的代码很是直白易懂，每个step的名字就表明了每一个用户的实际操作步骤。

constants.js

css 复制代码

module.exports = {
  INPUT_BAIDU_SEARCH: { css: 'input[id=kw]' },
  SEARCH_RESULT: { css: 'div[id=head_wrapper]' },
  SUBMIT: { css: 'input[type=submit]' }
}

在package.json中添加如下脚本：

json 复制代码

"codeceptjs": "codeceptjs run --steps",
"codeceptjs:headless": "HEADLESS=true codeceptjs run --steps",

运行测试用例：

shell 复制代码

 npm run codeceptjs

自动化测试过程：