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不支持设置请求头,但是PlaywrightPuppeteer支持。

下图来自于官网。

CodeceptJS 默认使用 Playwright 来在浏览器中运行测试,但也可以通过 WebDriverPuppeteerAppium 执行测试。

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

自动化测试过程:

相关推荐
霍格沃兹测试开发2 分钟前
Playwright系列课(2) | 元素定位四大法宝:CSS/文本/XPath/语义化定位实战指南
开源·测试
程序员二黑1 天前
元素定位翻车现场!避开这3个坑效率翻倍(附定位神器)
python·测试
用户3521802454752 天前
basic_pentesting_1靶场攻略
安全·测试
程序员二黑3 天前
零基础10分钟配好自动化环境!保姆级教程(Win/Mac双版)附避坑工具包
面试·程序员·测试
snow@li3 天前
AI问答-测试:理解冒烟测试(Smoke Testing)
测试·冒烟测试
霍格沃兹测试开发3 天前
Playwright 极速入门:1 小时搞定环境搭建与首个测试脚本
前端框架·开源·测试
你的人类朋友4 天前
【✈️速通】什么是SIT,什么是UAT?
后端·单元测试·测试
June bug7 天前
【Python基础】变量、运算与内存管理全解析
开发语言·python·职场和发展·测试
雪球工程师团队8 天前
代码“蝴蝶效应”终结者:AI Review + AST 联展,构建智能测试防御新体系
java·ai编程·测试
大话性能9 天前
作为性能测试新手,如何使用JMeter快速入门?
测试