Cucumber.js
Cucumber.js 是一个用于行为驱动 JavaScript 开发的测试框架。 Cucumber.js 测试使用可读性强的 Gherkin 语言编写,并保存在扩展名为 feature 的 feature 文件中。 WebStorm 与 Cucumber.js 集成,并识别用 Gherkin 编写的特性内容,因此您可以直接在 IDE 中运行 Cucumber.js 测试。
开始之前
安装 Cucumber.js
在嵌入式 终端 (Alt+F12 )中,输入以下命令之一:
npm install cucumber用于在项目中本地安装。npm install -g cucumber用于全局安装。npm install --save-dev cucumber将 Cucumber.js 安装为 开发依赖。
创建测试定义
使用 WebStorm,您可以使用 JavaScript 或 TypeScript 编写步骤定义。 WebStorm 会检测并高亮显示缺少定义的步骤,并建议使用快速修复来生成定义。
将光标置于缺少定义的步骤上,按 Alt+Enter ,然后选择 创建步骤定义 或 创建所有步骤定义。

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

在打开的对话框中,指定新文件的名称及定义所用语言。

如果该文件已存在,WebStorm 将显示弹出窗口,要求您选择要添加定义的文件,或选择创建新的文件。
运行测试
Cucumber.js 测试只能通过运行/调试配置启动。
创建 Cucumber.js 运行配置
打开 运行/调试配置 对话框(主菜单中的 ),点击左侧窗格中的
,并从列表中选择 Cucumber.js。 将打开 运行/调试配置:Cucumber.js 对话框。
在 Feature 文件或目录 字段中,指定要运行的测试。 请输入某个特定 .feature 文件或目录的路径,以运行一组特性内容。
请指定要使用的 Node.js 解释器。
如果选择 项目 别名,WebStorm 将自动使用 Node 解释器 字段中 Node.js 页的项目默认解释器。 在大多数情况下,WebStorm 会检测项目默认解释器并自动填写该字段。
您也可以选择其他已配置的本地或远程解释器,或点击
配置新的解释器。
如需更多信息,请参见 配置远程 Node.js 解释器、 配置本地 Node.js 解释器 和 在 Windows 子系统 Linux 上使用 Node.js。
在 Cucumber 包 字段中,指定存放 cucumber 包的文件夹路径。
请指定应用的工作目录。 默认情况下, 工作目录 字段显示项目根文件夹。 要更改此预定义设置,请指定目标文件夹的路径。
可选:
在 名称筛选器 字段中键入要运行的特定场景名称,以替代运行功能文件或目录中的所有场景。
指定要传递给可执行文件的命令行参数,例如
-r--require LIBRARY|DIR、-t--tags TAG_EXPRESSION或--coffee。 有关更多信息,请参阅通过cucumber-js --help命令提供的本机内置帮助。在 环境变量 字段中为您的应用指定环境变量。
通过运行配置运行测试
从配置列表中选择 Cucumber.js 运行/调试配置,然后点击列表或工具栏中的
。

在 测试运行器 选项卡中的 运行 工具窗口中监视测试执行并分析测试结果。 有关更多信息,请参阅 测试结果分析。
从测试文件运行测试
要运行单个测试,在编辑器中打开测试文件,将插入符号放在要运行的场景处,然后从上下文菜单中选择 。
要运行某个测试文件中的所有测试,请在编辑器中打开该测试文件或在 项目 工具窗口中选择它,然后从上下文菜单中选择 。
在任一情况下,WebStorm 都会创建一个运行/调试配置,您可以将其保存并在之后使用。
调试测试
如有需要,请 设置断点。
通过运行配置调试测试
从配置列表中选择 Cucumber.js 运行/调试配置,然后点击列表或工具栏中的
。

在 测试运行器 选项卡中的 运行 工具窗口中监视测试执行并分析测试结果。 有关更多信息,请参阅 测试结果分析。
从测试文件调试测试
要调试单个测试, 设置断点 ,将插入符号放在要调试的场景处,然后从上下文菜单中选择 。
要调试某个测试文件中的所有测试,请在编辑器中打开该测试文件或在 项目 工具窗口中选择它,然后从上下文菜单中选择 。
在任一情况下,WebStorm 都会创建一个运行/调试配置,您可以将其保存并在之后使用。
运行并调试以 TypeScript 编写的测试
创建 Cucumber.js运行/调试配置, 如上所示。
在 启动前 区域内点击
,在列表中选择 编译 TypeScript ,然后指定要使用的 tsconfig.json 文件。 在运行 Cucumber.js 之前,WebStorm 将使用该 tsconfig.json 运行 TypeScript 编译器。

要调试用 TypeScript 编写的测试,请打开 tsconfig.json 并设置
"sourceMap": true以启用 source map。
导航
借助 WebStorm,您可以在文件与相关测试文件之间,或在 测试运行器选项卡中的测试结果与测试之间跳转。
要在测试与其测试对象之间来回跳转,请在编辑器中打开该文件,并在上下文菜单中选择 或 ,或直接按下 Ctrl+Shift+T。
要从 .feature 文件中的某个步骤跳转到步骤定义,请按住 Ctrl ,将鼠标悬停于该步骤上,当其变为链接时点击该步骤。
要从测试结果跳转到测试定义,请在 测试运行器 选项卡中双击测试名称,或从上下文菜单中选择 ,或直接按 F4。 测试文件将在编辑器中打开,插入符号将定位在测试定义处。
配置语法高亮
您可以根据个人偏好和习惯配置支持 Cucumber.js 的语法高亮显示。
在 设置 对话框(Ctrl+Alt+S )中,转到 。
选择配色方案,接受默认继承的高亮设置,或按 颜色和字体 中的说明进行自定义。