WebStorm 2025.2 Help

Cucumber.js

Cucumber.js 是一个用于行为驱动 JavaScript 开发的测试框架。 Cucumber.js 测试使用可读性强的 Gherkin 语言编写,并保存在扩展名为 feature feature 文件中。 WebStorm 与 Cucumber.js 集成,并识别用 Gherkin 编写的特性内容,因此您可以直接在 IDE 中运行 Cucumber.js 测试。

开始之前

  1. 要使用 Cucumber.js 版本 6.0.0+,请确保您使用的是 WebStorm 2020.3.1 或更高版本。

  2. 请确保您的计算机已安装 Node.js

  3. 请确保在 设置 | 插件 页签的 已安装 选项卡中启用了所需的 Cucumber.jsGherkin 插件。 如需更多信息,请参见 管理插件

安装 Cucumber.js

  • 在嵌入式 终端Alt+F12 )中,输入以下命令之一:

    • npm install cucumber 用于在项目中本地安装。

    • npm install -g cucumber 用于全局安装。

    • npm install --save-dev cucumber 将 Cucumber.js 安装为 开发依赖

    另请参见 Cucumber.js 官方网站上的 Cucumber.js 示例

创建测试定义

使用 WebStorm,您可以使用 JavaScript 或 TypeScript 编写步骤定义。 WebStorm 会检测并高亮显示缺少定义的步骤,并建议使用快速修复来生成定义。

  1. 将光标置于缺少定义的步骤上,按 Alt+Enter ,然后选择 创建步骤定义创建所有步骤定义

    创建 Cucumber.js 步骤定义:快速修复

    或者,悬停在步骤上并使用弹出窗口中的链接。

    创建 Cucumber.js 步骤定义:从弹出菜单执行操作
  2. 在打开的对话框中,指定新文件的名称及定义所用语言。

    创建 Cucumber.js 步骤定义:选择语言版本

    如果该文件已存在,WebStorm 将显示弹出窗口,要求您选择要添加定义的文件,或选择创建新的文件。

运行测试

Cucumber.js 测试只能通过运行/调试配置启动。

创建 Cucumber.js 运行配置

  1. 打开 运行/调试配置 对话框(主菜单中的 运行 | 编辑配置 ),点击左侧窗格中的 添加按钮 ,并从列表中选择 Cucumber.js。 将打开 运行/调试配置:Cucumber.js 对话框。

  2. Feature 文件或目录 字段中,指定要运行的测试。 请输入某个特定 .feature 文件或目录的路径,以运行一组特性内容。

  3. 请指定要使用的 Node.js 解释器。

    如果选择 项目 别名,WebStorm 将自动使用 Node 解释器 字段中 Node.js 页的项目默认解释器。 在大多数情况下,WebStorm 会检测项目默认解释器并自动填写该字段。

    您也可以选择其他已配置的本地或远程解释器,或点击 浏览按钮 配置新的解释器。

    如需更多信息,请参见 配置远程 Node.js 解释器配置本地 Node.js 解释器在 Windows 子系统 Linux 上使用 Node.js

  4. Cucumber 包 字段中,指定存放 cucumber 包的文件夹路径。

  5. 请指定应用的工作目录。 默认情况下, 工作目录 字段显示项目根文件夹。 要更改此预定义设置,请指定目标文件夹的路径。

  6. 可选:

    • 名称筛选器 字段中键入要运行的特定场景名称,以替代运行功能文件或目录中的所有场景。

    • 指定要传递给可执行文件的命令行参数,例如 -r--require LIBRARY|DIR-t--tags TAG_EXPRESSION--coffee。 有关更多信息,请参阅通过 cucumber-js --help 命令提供的本机内置帮助。

    • 环境变量 字段中为您的应用指定环境变量。

通过运行配置运行测试

  1. 从配置列表中选择 Cucumber.js 运行/调试配置,然后点击列表或工具栏中的 运行图标

    选择运行/调试配置
  2. 测试运行器 选项卡中的 运行 工具窗口中监视测试执行并分析测试结果。 有关更多信息,请参阅 测试结果分析

从测试文件运行测试

  • 要运行单个测试,在编辑器中打开测试文件,将插入符号放在要运行的场景处,然后从上下文菜单中选择 运行场景:<scenario name>

  • 要运行某个测试文件中的所有测试,请在编辑器中打开该测试文件或在 项目 工具窗口中选择它,然后从上下文菜单中选择 运行 <test filename>

在任一情况下,WebStorm 都会创建一个运行/调试配置,您可以将其保存并在之后使用。

调试测试

通过运行配置调试测试

  1. 从配置列表中选择 Cucumber.js 运行/调试配置,然后点击列表或工具栏中的 调试图标

    选择运行/调试配置
  2. 测试运行器 选项卡中的 运行 工具窗口中监视测试执行并分析测试结果。 有关更多信息,请参阅 测试结果分析

从测试文件调试测试

  • 要调试单个测试, 设置断点 ,将插入符号放在要调试的场景处,然后从上下文菜单中选择 调试场景:<scenario name>

  • 要调试某个测试文件中的所有测试,请在编辑器中打开该测试文件或在 项目 工具窗口中选择它,然后从上下文菜单中选择 调试 <test filename>

在任一情况下,WebStorm 都会创建一个运行/调试配置,您可以将其保存并在之后使用。

运行并调试以 TypeScript 编写的测试

  1. 创建 Cucumber.js运行/调试配置, 如上所示

  2. 启动前 区域内点击 添加按钮 ,在列表中选择 编译 TypeScript ,然后指定要使用的 tsconfig.json 文件。 在运行 Cucumber.js 之前,WebStorm 将使用该 tsconfig.json 运行 TypeScript 编译器。

    Cucumber.js 运行配置:添加任务“启动前编译 TypeScript”
  3. 要调试用 TypeScript 编写的测试,请打开 tsconfig.json 并设置 "sourceMap": true 以启用 source map。

借助 WebStorm,您可以在文件与相关测试文件之间,或在 测试运行器选项卡中的测试结果与测试之间跳转。

  • 要在测试与其测试对象之间来回跳转,请在编辑器中打开该文件,并在上下文菜单中选择 转到 | 测试(S)转到 | 测试对象 ,或直接按下 Ctrl+Shift+T

  • 要从 .feature 文件中的某个步骤跳转到步骤定义,请按住 Ctrl ,将鼠标悬停于该步骤上,当其变为链接时点击该步骤。

  • 要从测试结果跳转到测试定义,请在 测试运行器 选项卡中双击测试名称,或从上下文菜单中选择 跳转到源 ,或直接按 F4。 测试文件将在编辑器中打开,插入符号将定位在测试定义处。

配置语法高亮

您可以根据个人偏好和习惯配置支持 Cucumber.js 的语法高亮显示。

  1. 设置 对话框(Ctrl+Alt+S )中,转到 编辑器 | 配色方案 | Cucumber

  2. 选择配色方案,接受默认继承的高亮设置,或按 颜色和字体 中的说明进行自定义。

最后修改日期: 2025年 9月 26日