密码UI
综合、现代、交互式测试开发环境 密码JS。 。 。 .
CodeceptJS测试开发的专业IDE类体验,包含摩纳哥编辑器集成,实时文件监视,动态浏览器管理,以及企业级网络兼容性.
* 特色示范
QQ 测试管理接口
与 TodoMVC 实例完成测试管理接口,显示测试统计数据、文件组织和实时状态更新
QQ 类似 IDE 的分拆视图并带有测试预览
专业 IDE 类分页视图, 显示左边的测试列表和右边的选定测试预览 - 最适合代码审查和测试探索
摩纳哥编辑,支持现代密码JS
配有语法突出、现代语法/等待 CodeceptJS 模式和综合指南的摩纳哥编辑
智能自动完成 & IntelliSense
智能自动完成 CodeceptJS 方法建议和实时语法验证
实时测试执行结果
现场测试执行,包括详细结果、时间信息、错误报告以及最新统计数据
高级配置和设置
具有文件监视、浏览器模式、助手配置和编辑器集成的综合设置面板
机动响应设计
完全响应移动界面,在保持所有功能的同时,能优美地适应平板电脑和智能手机
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你可以看到什么
上面的演示展现了真实的CodeceptUI功能
✅ 测试管理: 完成测试套件组织,跨越多个文件进行17个测试
✅ 实时统计: 对成功、失败、跳过和待定测试进行实时跟踪
✅ IDE 分割视图: 测试浏览和代码预览的专业双板布局
✅ 摩纳哥编辑器: 带有语法突出和自动完成的全功能代码编辑器
✅ 活执行: 实时测试运行,详细报告出错和时间安排
✅ 高级设置: 文件监视、浏览器配置和助手管理
✅ 移动响应: 在所有屏幕大小上完美工作的完全响应设计
✅ 现代用户界面: 具有良好用户经验的清洁专业界面
🔥主要新地物
摩纳哥专业守则编辑集成
全功能的浏览器内代码编辑,并配有现代的CodeceptJS 3.x支持
摩纳哥原始编辑集成
Live Monaco 编辑器, 使用现代语法突出和智能代码完成
主要编辑器特性 :
- IDE 专业经验: 完整的摩纳哥编辑器,带有语法突出、自动完成和实时验证
- 现代密码JS 3.x 支持: Playwright 、 Puppeteer 、 WebDriver 帮助器的更新模式
async/await语法 - 智能自动完成: 50+ 具有上下文感知建议的现代密码JS方法
- 智能代码解析: 使用套接字进行可靠情景提取以进行准确编辑
- 自动备份系统: 具有智能清理功能的自动文件备份( 最近保存了 5)
- 实时文件集成: 无缝集成, 文件监视自动更新
- 安全强化: 路径向外保护和文件验证
- 移动响应: 优化了所有设备大小的触摸友好界面
支持的现代法典ceptJS 图案 :
// Modern async/await syntax with full autocomplete support
Scenario('login with modern CodeceptJS', async ({ I }) => {
await I.amOnPage('/login');
await I.fillField('email', '[email protected]');
await I.click('Login');
await I.waitForVisible('.dashboard');
await I.see('Welcome Dashboard');
});
// Data-driven testing support
Data([
{ user: 'admin', password: 'secret' },
{ user: 'guest', password: 'guest123' }
]).Scenario('data-driven login test', async ({ I, current }) => {
await I.amOnPage('/login');
await I.fillField('username', current.user);
await I.fillField('password', current.password);
});
// Modern hooks and configuration
Before(async ({ I }) => {
await I.amOnPage('/setup');
});
Scenario.only('focused test for debugging', async ({ I }) => {
// Only this test will run
});
通用网络兼容性
企业级与现代发展工作流程的兼容性
- CORS 支助: 带有环境变量覆盖支持的完整 CORS 配置
- 反向代理兼容: 在Traefik、nginx和其他反向代理之后无缝工作
- 自定义端口支持: 加强对后向兼容的自定义端口的支持
- WebSocket 可靠性: 智能连接处理后退机制
实时开发特征
文件监视自动更新( A)
- 自动重新装入 当测试情景、配置或任何被观看的文件发生变化时
- 视觉指标 显示文件监视状态和更改
- 智能通知 用于文件修改、添加和删除
- 全面监测 测试文件、配置文件和页面对象
动态运行时模式切换
- 飞行时切换 无头浏览器模式和有窗口浏览器模式之间
- 视觉模式指标 在显示当前执行模式的主工具栏中
- 持久设置 记住您在会话中的喜好
- 易切换控制 在设置菜单中
无头模式指标和设置
窗口模式指标和设置
+++ 增强页面对象管理
带有语法加亮和源查看的页面对象浏览器
- 可视页面对象浏览器 用于探索您的测试架构
- 源代码查看器 以摩纳哥语法突出显示
- 简单导航 不同页面对象之间
- 综合编辑 页面对象文件的能力
XQ 性能和用户体验
综合性能优化:
- 取消搜索 为大型测试套房进行实时过滤
- 智能渲染 只显示匹配的测试方案
- 优化 WebSocket 通信 与智能节奏
- 懒惰装入 (摩纳哥编辑器按需装入)
- 增强机动经验 所有设备都有响应性设计
现代用户界面 :
- 增强视觉反馈 有进度指标和状态徽章
- 正在装入组件 带有取消支持
- 餐饮通知制度 为用户提供更好的反馈
- 现代步骤可视化 有持续时间徽章和状态图标
页面对象浏览器和源查看器
核心特征
测试执行和管理
- 多个运行时模式: 作为 Electron app 或 Web 服务器运行
- 灵活浏览器支持: 有运行时间切换的无头模式( W)
- 互动发展: 有暂停/恢复能力的活性测试写入
- 实时监测: 带有可视化指标的综合文件观看
专业代码编辑
- 摩纳哥编辑集成: 用语法突出显示的完整 IDE 体验
- 现代密码JS 支助: CodeceptJS 3.x 语法模式的完整支持
- 智能自动补全: 50+ 具有智能环境意识的方法
- 备份恢复( R): 带有清理管理的自动文件备份
* 网络部署
- 通用兼容性: CORS 支持, 逆向代理兼容
- 自定义端口配置:利用遗留支助加强港口处理
- 企业准备:加强安全并进行路由保护
- WebSocket 可靠性: 智能连接处理后退
* 现代用户经验
- 响应设计: 优化桌面、平板电脑和移动设备
- 增强可视化: 进度指标、状态徽章和装载状态
- 业绩优化: 忽略搜索、智能渲染、懒惰装入
- 横线: 支持所有CodeceptJS引擎 :
- 剧作家 (建议)
- 傀儡
- 网络驱动程序
- 测试咖啡厅
高级特性
代码编辑器 API
- (原始内容存档于2013-10-12) (英语). REST API 用于程序代码编辑操作
- 实时合作 团队发展能力
- 版本控制集成 自动备份管理
- 安全第一办法 附有全面输入验证
浏览器管理
- 单会话助手 智能生命周期管理
- 资源清理 防止浏览器进程泄露
- 伟大的关闭 以适当的浏览器终止
- 多帮助支持 跨不同自动化框架
快速启动
要求数 代码JS 3 待安装
在已使用 CodeceptJS 的项目中安装 CodeceptUI
npm i @codeceptjs/ui --save
应用程序模式
在应用模式下运行 CodeceptUI(建议开发,本地调试):
npx codecept-ui --app
用途 codecept.conf.js 从当前目录配置 .
如果需要,请提供配置文件的路径 --config 选项 :
npx codecept run --config tests/codecept.conf.js
Web 服务器模式
作为网络服务器运行 CodeceptUI(建议为无头模式,远程调试):
npx codecept-ui
打开 http://localhost:3333 去看所有测试 并运行它们.
技术成就和问题
* 全面解决吉打问题
此版本地址 10个关键基特赫布问题 防止CodeceptUI与现代发展工作流程有效合作:
- 问题38与现代 CodeceptJS 3.x 语法支持整合
- 问题536: 适当的 WebSocket 连接的 CORS 信头配置
- 问题125: 以智能连接处理反向代理支持
- 问题72: 自定义端口 WebSocket 功能, 有遗留的环境变量支持
- 问题178: 为 @ codeceptjs/ 配置兼容性进行配置勾钩处理
- 问题104: 以全面自动更新方式加强文件观看
- 问题117: 运行按钮状态管理, 并释放适当的退出事件
- 问题114/#110: 浏览器清理和资源管理改进
- 问题105: IDE 类似拆分相框视图,并带有测试代码预览
- 第41/72/100/103号问题: 移动响应设计和小屏幕UX增强
摩纳哥编辑架构
// Professional autocomplete with modern CodeceptJS methods
const suggestions = {
playwright: [
'I.amOnPage(url)', 'I.click(locator)', 'I.fillField(field, value)',
'I.waitForVisible(locator, sec)', 'I.grabTextFrom(locator)'
],
structure: [
'Scenario(\'name\', async ({ I }) => {})',
'Before(async ({ I }) => {})', 'Data().Scenario(...)'
]
};
* 增强安全和可靠性
- 路由保护 防止未经授权的文件访问
- 输入验证 包含综合参数检查
- 智能情景解析 使用牙套匹配( 比全 AST 更可靠)
- 重大错误处理 带有方便用户的错误信息
绩效和质量保证
- 118+ 综合试验 覆盖所有功能层
- 90+%测试覆盖率 确保整个节点环境的可靠性
- 零中断更改 保持完全后向兼容性
- 企业级 WebSocket 架构 有故障机制
用途 codecept.conf.js 从当前目录配置 .
如果需要,请提供配置文件的路径 --config 选项 :
npx codecept run --config tests/codecept.conf.js
增强端口配置
CodeceptUI现在支持灵活的端口配置,其中既有现代环境变量,也有遗留环境变量:
# Modern environment variables (recommended)
export applicationPort=3000
export wsPort=4000
npx codecept-ui --app
# Legacy environment variables (backward compatible)
export PORT=3000
export WS_PORT=4000
npx codecept-ui --app
# Command line options (highest priority)
npx codecept-ui --app --port=3000 --wsPort=4000
网络配置示例
CORS 配置 :
# Allow custom origins
export CORS_ORIGIN="https://my-domain.com"
npx codecept-ui
反向代理支持 :
# Nginx configuration example
location /codeceptui/ {
proxy_pass http://localhost:3333/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
发展
见 捐款额
启动调试输出的代码UI
密码UI使用 调试 用于输出调试信息的软件包。 这对解决问题或只是看看CodeceptUI在做什么很有用。 打开调试信息
# verbose: get all debug information
DEBUG=codeceptjs:* npx codecept-ui
# just get debug output of one module
DEBUG=codeceptjs:codeceptjs-factory npx codecept-ui
贷项
贡献者
谢谢大家的贡献!
