WebStorm 2025.3 Help

Cucumber.js

Cucumber.js 是一个行为驱动的 JavaScript 开发测试框架。 Cucumber.js 测试是用人类可读的 Gherkin 语言编写的,并存储在具有 功能 扩展名的 功能文件中。 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 文件或文件夹的路径,如果您希望运行一组功能。

  3. 指定要使用的 Node.js 运行时。

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

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

    有关更多信息,请参阅 配置远程 Node.js 运行时配置本地 Node.js 运行时环境在适用于 Linux 的 Windows 子系统上使用 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 运行/调试配置,然后在列表或工具栏中点击 调试图标 &#xa0;。

    选择运行/调试配置
  2. 测试运行器 选项卡的 运行 工具窗口中监控测试执行并分析测试结果。 有关详细信息,请参考 探索测试结果

从测试文件调试测试

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

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

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

运行和调试使用 TypeScript 编写的测试

  1. 创建一个 Cucumber.js运行/调试配置 如上所述

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

    Cucumber.js 运行配置:添加一个 "Compile TypeScript Before launch" 任务
  3. 要调试用 TypeScript 编写的测试,请打开您的 tsconfig.json 并设置 "sourceMap": true 以启用源映射。

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

  • 在编辑器中打开文件,选择上下文菜单中的 转到 | 测试(S)转到 | 测试对象 ,或者直接按 Ctrl+Shift+T ,即可在测试和其主题之间进行切换。

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

  • 从测试结果跳转到测试定义,双击 测试运行器 选项卡中的测试名称,或从上下文菜单中选择 跳转到源 ,或者按 F4。 测试文件在编辑器中打开时,文本光标放置在测试定义处。

配置语法高亮

您可以根据您的喜好和习惯配置 Cucumber.js 相关的语法高亮。

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

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

最后修改日期: 2025年 12月 8日