Cypress 自定义命令
Custom Commands 提供了一种在 Cypress 测试套件中复用某些方法或函数的方法。 例如,您可以编写一个用于用户登录的命令,并在项目中根据需要复用它。
WebStorm 支持 Custom Commands,这意味着可以立即使用所有代码辅助功能,如重命名、导航、代码补全和检查功能。
自定义命令代码辅助
Cypress 专用检查
Cypress 使用一种 链式机制 ,允许编写一系列命令,其中信息从一个命令传递到下一个,直到链条结束或发生错误。
但是,该机制具有一些特定规则。 例如,任何 action command 必须始终放在链条末尾,并且只能使用一次。
在此示例中,链中连续包含两个 action command,这是不允许的。 执行该测试将导致错误。
在此示例中,链被拆分为两段,因此每段链中仅包含一个 action command。 该测试将被正常执行。
在 JavaScript/TypeScript 中不会对命令链进行验证,在 Cypress 中仅在运行时执行验证,这可能会导致测试执行期间出现问题。 WebStorm 能够对链式命令进行检查,并高亮显示错误用法。

特定函数检查
WebStorm 会执行特定函数的代码检查,以检测并修复项目中的异常代码。
例如,如果为命令提供的参数数量或类型不正确,有误的代码将会被高亮显示。 将鼠标悬停在高亮代码上可查看错误说明。

有关详细信息,请参阅 代码检查。
重命名
如果需要重命名命令,您可以使用 重命名重构功能。 操作如下:
选中您要重命名的命令。

按下 Shift+F6 ,然后输入命令的新名称。

(可选)配置其他搜索选项并定义范围。
单击 重构。
创建自定义命令
要创建自定义命令,须先编写命令,再为其创建 TypeScript 声明。 操作如下:
在代码编辑器中编写命令。


将鼠标悬停在高亮代码上并单击 创建缺失的 TypeScript 声明。
或者,将光标置于高亮代码处,按下 Alt+Enter ,并选择 创建缺失的 TypeScript 声明。


随后,将生成 TypeScript 声明并添加到 cypress/support/index.d.ts 文件中。

跳转到 TypeScript 声明
您可能希望在命令实现与对应的 TypeScript 声明之间跳转:
要跳转到 TypeScript 声明,请单击实现命令处边栏中的
图标。

要跳转回命令实现,请单击 TypeScript 声明处边栏中的
图标。

使用自定义命令
创建 自定义命令后,便可在代码中使用它。 为此操作:
在测试中,键入
cy.,然后输入自定义命令的名称。

更改命令文件位置
默认情况下,包含生成的 TypeScript 声明的文件位于 cypress/support/commands.ts 。 如果您希望更改位置:
按下 Ctrl+Alt+S 打开设置,然后选择 。
在 用于存储自定义命令 TypeScript 声明的 TypeScript 文件 字段中指定新路径。

应用更改并关闭对话框。