# @codeceptjs/ui 中文文档

规范地址：https://npmcn.com/package/%40codeceptjs/ui/

版本：1\.3\.8
npm 元数据更新时间：2026-10-21T10:26:29.884Z
中文译文更新时间：2026-11-10T06:23:38.446Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40codeceptjs/ui
原文对照：https://npmcn.com/package/%40codeceptjs/ui/?lang=original
项目主页：https://github.com/codeceptjs/ui#readme
源码仓库：https://github.com/codeceptjs/ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：25.6 MB，220 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：15 个
- peer 依赖：codeceptjs ^3\.7\.3
- 首次发布：2019-12-03T00:20:59.821Z
- 最新版本发布：2025-10-02T08:42:23.140Z
- 近 30 天下载量：45597（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：51（近 12 个月 0 个）

## 中文简介

综合、现代、交互式测试开发环境 [密码JS](https://codecept.io/)。 。 。 .

## 安装

```sh
npm install @codeceptjs/ui
```

也可以使用：`pnpm add @codeceptjs/ui`、`yarn add @codeceptjs/ui`、`bun add @codeceptjs/ui`

## README

# 密码UI

综合、现代、交互式测试开发环境 [密码JS](https://codecept.io/)。 。 。 .

**CodeceptJS测试开发的专业IDE类体验,包含摩纳哥编辑器集成,实时文件监视,动态浏览器管理,以及企业级网络兼容性.**

![codeceptui](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui2.gif)

## \* 特色示范

### QQ 测试管理接口

![CodeceptUI Demo Interface](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-demo-interface.png) _与 TodoMVC 实例完成测试管理接口,显示测试统计数据、文件组织和实时状态更新_

### QQ 类似 IDE 的分拆视图并带有测试预览

![CodeceptUI IDE Split View](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-ide-split-view.png) _专业 IDE 类分页视图, 显示左边的测试列表和右边的选定测试预览 - 最适合代码审查和测试探索_

### 摩纳哥编辑,支持现代密码JS

![CodeceptUI Monaco Editor](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-monaco-editor-demo.png) _配有语法突出、现代语法/等待 CodeceptJS 模式和综合指南的摩纳哥编辑_

### 智能自动完成 & IntelliSense

![CodeceptUI Monaco Autocomplete](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-monaco-autocomplete-demo.png) _智能自动完成 CodeceptJS 方法建议和实时语法验证_

### 实时测试执行结果

![CodeceptUI Test Results](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-test-results-demo.png) _现场测试执行,包括详细结果、时间信息、错误报告以及最新统计数据_

### 高级配置和设置

![CodeceptUI Settings](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-settings-demo.png) _具有文件监视、浏览器模式、助手配置和编辑器集成的综合设置面板_

### 机动响应设计

![CodeceptUI Mobile Interface](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-mobile-responsive-demo.png) _完全响应移动界面,在保持所有功能的同时,能优美地适应平板电脑和智能手机_

### {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你可以看到什么

上面的演示展现了真实的CodeceptUI功能

✅ **测试管理**: 完成测试套件组织,跨越多个文件进行17个测试  
✅ **实时统计**: 对成功、失败、跳过和待定测试进行实时跟踪  
✅ **IDE 分割视图**: 测试浏览和代码预览的专业双板布局  
✅ **摩纳哥编辑器**: 带有语法突出和自动完成的全功能代码编辑器  
✅ **活执行**: 实时测试运行,详细报告出错和时间安排  
✅ **高级设置**: 文件监视、浏览器配置和助手管理  
✅ **移动响应**: 在所有屏幕大小上完美工作的完全响应设计  
✅ **现代用户界面**: 具有良好用户经验的清洁专业界面

## 🔥主要新地物

### 摩纳哥专业守则编辑集成

**全功能的浏览器内代码编辑,并配有现代的CodeceptJS 3.x支持**

![Test Editor](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-test-editor.png) _摩纳哥原始编辑集成_

![Monaco Editor Demo](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-monaco-editor-demo.png) _Live Monaco 编辑器, 使用现代语法突出和智能代码完成_

**主要编辑器特性 :**

-   **IDE 专业经验**: 完整的摩纳哥编辑器,带有语法突出、自动完成和实时验证
-   **现代密码JS 3.x 支持**: Playwright 、 Puppeteer 、 WebDriver 帮助器的更新模式 `async/await` 语法
-   **智能自动完成**: 50+ 具有上下文感知建议的现代密码JS方法
-   **智能代码解析**: 使用套接字进行可靠情景提取以进行准确编辑
-   **自动备份系统**: 具有智能清理功能的自动文件备份( 最近保存了 5)
-   **实时文件集成**: 无缝集成, 文件监视自动更新
-   **安全强化**: 路径向外保护和文件验证
-   **移动响应**: 优化了所有设备大小的触摸友好界面

**支持的现代法典ceptJS 图案 :**

```javascript
// Modern async/await syntax with full autocomplete support
Scenario('login with modern CodeceptJS', async ({ I }) => {
  await I.amOnPage('/login');
  await I.fillField('email', 'user@example.com');
  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 可靠性**: 智能连接处理后退机制

### 实时开发特征

![File Watching](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-main-interface.png)

#### 文件监视自动更新( A)

-   **自动重新装入** 当测试情景、配置或任何被观看的文件发生变化时
-   **视觉指标** 显示文件监视状态和更改
-   **智能通知** 用于文件修改、添加和删除
-   **全面监测** 测试文件、配置文件和页面对象

#### 动态运行时模式切换

-   **飞行时切换** 无头浏览器模式和有窗口浏览器模式之间
-   **视觉模式指标** 在显示当前执行模式的主工具栏中
-   **持久设置** 记住您在会话中的喜好
-   **易切换控制** 在设置菜单中

![Headless Mode](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-headless-mode.png) _无头模式指标和设置_

![Window Mode](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-window-mode.png) _窗口模式指标和设置_

### +++ 增强页面对象管理

![Page Objects](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-page-objects.png) _带有语法加亮和源查看的页面对象浏览器_

-   **可视页面对象浏览器** 用于探索您的测试架构
-   **源代码查看器** 以摩纳哥语法突出显示
-   **简单导航** 不同页面对象之间
-   **综合编辑** 页面对象文件的能力

### XQ 性能和用户体验

**综合性能优化:**

-   **取消搜索** 为大型测试套房进行实时过滤
-   **智能渲染** 只显示匹配的测试方案
-   **优化 WebSocket 通信** 与智能节奏
-   **懒惰装入** (摩纳哥编辑器按需装入)
-   **增强机动经验** 所有设备都有响应性设计

**现代用户界面 :**

-   **增强视觉反馈** 有进度指标和状态徽章
-   **正在装入组件** 带有取消支持
-   **餐饮通知制度** 为用户提供更好的反馈
-   **现代步骤可视化** 有持续时间徽章和状态图标

![Page Objects](https://npmcn.com/package/%40codeceptjs/ui/codecept-ui-page-objects.png) _页面对象浏览器和源查看器_

## 核心特征

### 测试执行和管理

-   **多个运行时模式**: 作为 Electron app 或 Web 服务器运行
-   **灵活浏览器支持**: 有运行时间切换的无头模式( W)
-   **互动发展**: 有暂停/恢复能力的活性测试写入
-   **实时监测**: 带有可视化指标的综合文件观看

### 专业代码编辑

-   **摩纳哥编辑集成**: 用语法突出显示的完整 IDE 体验
-   **现代密码JS 支助**: CodeceptJS 3.x 语法模式的完整支持
-   **智能自动补全**: 50+ 具有智能环境意识的方法
-   **备份恢复( R)**: 带有清理管理的自动文件备份

### \* 网络部署

-   **通用兼容性**: CORS 支持, 逆向代理兼容
-   **自定义端口配置**:利用遗留支助加强港口处理
-   **企业准备**:加强安全并进行路由保护
-   **WebSocket 可靠性**: 智能连接处理后退

### \* 现代用户经验

-   **响应设计**: 优化桌面、平板电脑和移动设备
-   **增强可视化**: 进度指标、状态徽章和装载状态
-   **业绩优化**: 忽略搜索、智能渲染、懒惰装入
-   **横线**: 支持所有CodeceptJS引擎 :
    -   **剧作家** (建议)
    -   **傀儡**
    -   **网络驱动程序**
    -   **测试咖啡厅**

## 高级特性

### 代码编辑器 API

-   **(原始内容存档于2013-10-12) (英语). REST API** 用于程序代码编辑操作
-   **实时合作** 团队发展能力
-   **版本控制集成** 自动备份管理
-   **安全第一办法** 附有全面输入验证

### 浏览器管理

-   **单会话助手** 智能生命周期管理
-   **资源清理** 防止浏览器进程泄露
-   **伟大的关闭** 以适当的浏览器终止
-   **多帮助支持** 跨不同自动化框架

## 快速启动

**要求数 [代码JS 3](https://codecept.io/) 待安装**

在已使用 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 服务器模式

![webserver mode](https://npmcn.com/package/%40codeceptjs/ui/codeceptui.gif)

作为网络服务器运行 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增强

### 摩纳哥编辑架构

```javascript
// 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现在支持灵活的端口配置,其中既有现代环境变量,也有遗留环境变量:

```bash
# 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 配置 :**

```bash
# Allow custom origins
export CORS_ORIGIN="https://my-domain.com"
npx codecept-ui
```

**反向代理支持 :**

```nginx
# 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;
}
```

## 发展

见 [捐款额](https://npmcn.com/package/%40codeceptjs/ui/.github/CONTRIBUTING.md)

## 启动调试输出的代码UI

密码UI使用 [调试](https://github.com/debug-js/debug) 用于输出调试信息的软件包。 这对解决问题或只是看看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
```

# 贷项

-   最初由Stefan Huber创建@hubidu27
-   维护了我的 @ davertmik
-   图标/Logos [代码图标](https://iconscout.com/icon/code-280) 以 [精选主题](https://iconscout.com/contributors/elegant-themes) 打开 [图标凸出](https://iconscout.com/)

# 贡献者

谢谢大家的贡献!

[![](https://avatars2.githubusercontent.com/u/13134082?v=4 "hubidu")](https://github.com/hubidu) [![](https://avatars0.githubusercontent.com/u/220264?v=4 "DavertMik")](https://github.com/DavertMik) [![](https://avatars.githubusercontent.com/u/26163841?v=4 "Arhell")](https://github.com/Arhell) [![](https://avatars0.githubusercontent.com/u/7845001?v=4 "PeterNgTr")](https://github.com/PeterNgTr) [![](https://avatars2.githubusercontent.com/u/11994986?v=4 "avinash360")](https://github.com/avinash360) [![](https://avatars3.githubusercontent.com/u/3959504?v=4 "kaflan")](https://github.com/kaflan) [![](https://avatars2.githubusercontent.com/u/22434650?v=4 "lukasf98")](https://github.com/lukasf98) [![](https://avatars3.githubusercontent.com/u/16301998?v=4 "geilix10")](https://github.com/geilix10) [![](https://avatars3.githubusercontent.com/u/23395221?v=4 "Teomik129")](https://github.com/Teomik129)

## 常见问题

### @codeceptjs/ui 是什么？

综合、现代、交互式测试开发环境 密码JS。 。 。 \.

### 如何安装 @codeceptjs/ui？

在项目目录运行 npm install @codeceptjs/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：codeceptjs（^3\.7\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 codecept-ui，可以用 npx codecept-ui 直接运行。

### @codeceptjs/ui 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/codeceptjs\_\_ui 是否存在。

### @codeceptjs/ui 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @codeceptjs/ui 可以商用吗？

@codeceptjs/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @codeceptjs/ui 的下载量有多少？

根据 npm 官方下载统计，@codeceptjs/ui 在 2026/10/10 – 2026/11/08 这 30 天内被下载 45,597 次，日均约 1,520 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @codeceptjs/ui 还在维护吗？

最新版本 1\.3\.8 发布于 2025/10/02（1\.1 年前）；至今共发布 51 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/12/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。