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

自动化测试过程:

相关推荐
莫魂魂3 小时前
07.自动化测试常用函数
测试
胡斌附体8 小时前
linux测试端口是否可被外部访问
linux·运维·服务器·python·测试·端口测试·临时服务器
June bug2 天前
【软考中级·软件评测师】下午题·面向对象测试之架构考点全析:分层、分布式、微内核与事件驱动
经验分享·分布式·职场和发展·架构·学习方法·测试·软考
郝同学的测开笔记12 天前
从 "不支持的URL" 错误谈 IPv6 兼容性与 HTTPDNS 优化
测试
chao_78914 天前
作为测试人员,平时用什么大模型?怎么用?
面试·大模型·测试
chao_78916 天前
死锁相关知识
网络协议·游戏·测试·死锁
cooldream200916 天前
pytest 框架详解与实战指南
pytest·测试
大话性能16 天前
使用Python进行GRPC和Dubbo协议的高级测试
测试
和我乘风破浪17 天前
iOS自动化录屏在Chrome浏览器打不开处理方法
python·测试
Apifox18 天前
Apifox SEO 设置全解析:让你的 API 文档更容易被搜到
前端·后端·测试