测试开发——初识CodeceptJS

---

CodeceptJS简介

CodeceptJS是一个现代的端到端测试框架，具有特殊的BDD风格语法。这些测试被编写为用户在站点上的操作的线性场景。
CodeceptJS的设计理念兼顾了简洁性和技术先进性。它通过使用最新的ES6语法，屏蔽了复杂的回调细节，让测试用例的编写更像自然的叙述。同时，其支持多种后端API，如Playwright、Puppeteer及WebDriver等，为测试提供了灵活性和广泛的技术栈选择。

CodeceptJS强调以用户视角编写测试用例，意在使非技术人员也能轻松理解和维护测试脚本。它使用“I”对象的方法来抽象浏览器交互，简化了测试代码的阅读和编写过程。这种做法确保了测试的易读性和易维护性CodeceptJS将执行命令旁路给helper。根据启用的帮助程序，您的测试将以不同的方式执行。下面是CodeceptJS架构图：

所有的helper都共享相同的API，因此很容易将测试从一个后端迁移到另一个后端。但是，由于后端的差异及其限制，它们不能保证相互兼容。例如，你不能在WebDriver中设置请求头，但你可以在Playwright或Puppeteer中这样做。
选择一个helper，因为它定义了如何执行测试。如果需求发生变化，很容易迁移到另一个。

CodeceptJS&Selenium

两者的异同

1. 架构
   • 它通过Selenium WebDriver来直接控制浏览器，实现跨浏览器的自动化操作
   • CodeceptJS封装了Selenium WebDriver、Puppeteer、Playwright等驱动，并且可以根据需要灵活切换
2. 语言支持
   • 支持多种编程语言，如Java、Python、JavaScript、Kotlin等
   • 主要使用JavaScript/TypeScript编写
3. 脚本的编写
   • Selenium测试脚本较为底层，用户需要手动编写大量的代码来处理浏览器交互和测试逻辑
   • CodeceptJS使用更高级别的语法和封装，使得测试脚本更简洁明了
4. 框架的扩展
   • Selenium框架较为基础，需要与其他测试框架和工具（如JUnit, TestNG, pytest等）结合使用，需要额外配置和编写代码来实现测试报告、截图等功能
   • CodeceptJS自带丰富的插件和扩展支持，如截图、测试报告、并行执行等，提供内置的步骤定义，使得测试脚本更易读和维护
5. 学习成本
   • Selenium对编程基础较差的同学并不友好，需要了解浏览器自动化的底层原理和各类API的使用
   • CodeceptJS代码的编写以第一人称BDD风格的语法，使得非技术人员也能较容易地理解和编写测试脚本

来看一下两者的代码编写，就会发现CodecepJs的代码更为简洁，并且一第一人称的语法进行编写，可读性更强

Selenium代码编写

WebDriver driver = new ChromeDriver();
driver.get("http://example.com/login");
WebElement username = driver.findElement(By.name("username"));
WebElement password = driver.findElement(By.name("password"));
WebElement loginButton = driver.findElement(By.id("login"));
username.sendKeys("user");
password.sendKeys("password");
loginButton.click();
String welcomeText = driver.findElement(By.id("welcome")).getText();
assertEquals("Welcome, user", welcomeText);
driver.quit();

CodeceptJS代码编写

Feature('Login');
Scenario('User can login', ({ I }) => {
  I.amOnPage('/login');
  I.fillField('Username', 'user');
  I.fillField('Password', 'password');
  I.click('Login');
  I.see('Welcome, user');
});

两者优缺点

Selenium
优点：

• 广泛的语言支持：支持Java、Python、C#、JavaScript等多种编程语言。
  缺点：
• 编写复杂：低级API意味着编写和维护测试代码的工作量较大。
• 调试困难：由于其操作的底层特性，测试失败时的调试和定位问题可能比较复杂。
• 执行速度：由于直接与浏览器交互，Selenium的测试执行速度可能相对较慢
  CodeceptJS
  优点：
• 易用性强：高层封装，测试脚本简洁易懂，并且每个操作都会以日志形式打印出来，浅显易懂
• 模块化与灵活性：支持多种测试驱动，可根据需要切换（如Selenium WebDriver、Puppeteer、Playwright）。
• 现代化设计：专为现代Web应用设计，支持AJAX操作、单页应用（SPA）等现代Web开发模式。
  缺点：
• 主要局限于JavaScript/TypeScript：虽然易用，但局限于JavaScript/TypeScript社区，对于多语言项目可能不适用。
• 依赖于底层驱动：CodeceptJS本身是封装工具，其稳定性和性能依赖于底层驱动（如Selenium、Puppeteer）的表现。

Playwright

Playwright 是一个用于自动化 Web 浏览器的开源测试框架，由微软开发。它提供了一种强大且灵活的方式来进行跨浏览器测试，支持在多种浏览器（如 Chromium、Firefox 和 WebKit）上执行测试脚本。Playwright 的主要特性和功能如下：

1. 跨浏览器支持
   • Chromium（包括 Google Chrome 和 Microsoft Edge）
   • Firefox
   • WebKit（包括 Safari）
2. Playwright 可以在“无头”和“有头”模式下运行，也就是可以模拟用户真实使用并观察测试情况，也可以用于在 CI/CD 环境
3. 自动等待（Auto-Waiting）
   • Playwright 会自动等待元素加载、动画完成、网络请求完成等操作，因此不需要在测试脚本中手动添加等待时间。这显著减少了测试失败的可能性。
4. Playwright 提供了丰富的 API
   • 表单提交
   • 文件上传和下载
   • 截图和 PDF 生成
   • 捕获网络请求和响应
   • 模拟移动设备、地理位置、权限等
5. 多页面、多上下文支持
   • Playwright 允许在单个测试中同时处理多个页面或浏览器上下文，这对于测试多标签页、多窗口应用程序特别有用

CodeceptJs环境搭建

首先需要安装node.js环境，在CMD命令框测试自己的node.js环境是否正常

node -v
v20.15.0

建议将node的源设置为国内源，不然下载会比价慢

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

查看当前镜像源：

npm config get registry

使用npm init -y命令初始化npm

>npm init -y
Wrote to C:\Users\HeHanYu\Desktop\code\Java\JavaCode\test\CodeceptJs\package.json:

{
  "name": "codeceptjs",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

安装CodeceptJs

npm install codeceptjs --save

安装对应的助手

npx playwright install

在当前目录下初始化CodeceptJs

npx codeceptjs init

初始化的过程中会遇到多个选项问题

#是否使用TS编程？
? Do you plan to write tests in TypeScript? No
# 你的测试脚本位置，*—_test.js表示以 _test.js结尾的文件都会认为是测试脚本
? Where are your tests located? ./*_test.js
#使用的助手？
? What helpers do you want to use? Playwright
# 日志、截图报告存放在哪里？
? Where should logs, screenshots, and reports to be stored? ./output
# 语言
? Do you want to enable localization for tests? http://bit.ly/3GNUBbh zh-CN
# 在哪个浏览器测试
? [Playwright] Browser in which testing will be performed. Possible options: chromium, firefox, webkit or electron chromium
# 输入我们需要测试的网址
? [Playwright] Base url of site to be tested http://localhost
# 测试时，是否打开浏览器窗口
? [Playwright] Show browser window Yes
# 测试的标题
? Feature which is being tested (ex: account, login, etc) demo
# 默认生成一个和测试标题一直的测试文件
? Filename of a test demo_test.js

开始编写代码

Feature('demo');

Scenario('test something',  ({ I }) => {
    I.amOnPage('https://www.baidu.com');
    I.fillField({xpath : '//*[@id="kw"]'},'CodeceptJs');
    I.click({xpath:'//*[@id="su"]'});
    I.wait(5);
});

运行代码

npx codeceptjs run --steps

---