Cypress 自定义 Commands

自定义命令提供了一种在 Cypress 测试套件中重用某些方法或函数的方式。例如，您可以编写一个命令来登录用户，并在项目中适用时重复使用它。

PhpStorm 支持自定义命令，这意味着所有代码辅助功能，如重命名、导航、代码补全和检查等，都可以立即使用。

自定义命令编码辅助

Cypress 专用检查

Cypress 使用一种链机制，使您能够编写一系列命令，以便信息从一个命令传递到下一个命令，直到链结束或发生错误。

但是，此机制具有一些特定性。例如，任何 action command必须始终放在链的末尾并且只能使用一次。

在此示例中，这个链包含两个连在一起的 action 命令，这是不允许的。执行此测试将导致错误。

                        it('Click the search button and type Cypress', () => {
                            cy.get("button[data-test='search-button']")
                                .click()
                                .type('Cypress')
                         })
                    
     

在这个例子中，链被分成两部分，所以每个链只包含一个动作命令。此测试将顺利执行。

                        it('Click the search button and type Cypress', () => {
                            cy.get("button[data-test='search-button']").click()
                            cy.get("input[data-test$='inner']").type('Cypress')
                        })
                    
     

在 JavaScript/TypeScript 中不执行命令链的验证，而在 Cypress 中仅在运行时执行，这可能会导致测试执行过程中的问题。 PhpStorm 会对链式命令进行检查，突出显示不正确的使用。

函数特定检查

PhpStorm 执行特定功能的代码检查，以检测和更正项目中的异常代码。

例如，如果您为该命令提供了不正确的参数数量或类型，错误代码会被高亮显示。您可以将鼠标悬停在高亮的代码上查看错误描述。

有关更多信息，请参见代码检查。

重命名

如果您需要重命名命令，可以使用 Rename 重构。为此：

突出显示您想要重命名的命令。
请按 Shift+F6 并提供一个新名称用于该命令。
（可选）配置其他搜索选项并定义范围。
点击重构。

有关更多信息，请参见重命名重构。

创建自定义命令

要创建自定义命令，您必须先编写命令，然后为其创建一个 TypeScript 声明。为此：

在代码编辑器中编写您的命令。
建议在 cypress/support/commands.ts 或 cypress/support/commands.js 文件中指定命令，因为在评估任何测试文件之前，此文件会通过 supportFile 中提供的 import 语句加载。
最初，PhpStorm 会将该命令突出显示为错误或弱警告，具体取决于为项目选择的编程语言。然而，一旦您创建了 TypeScript 声明，问题就会得到解决。
将鼠标悬停在高亮代码上，然后点击创建缺失的 TypeScript 声明。
或者，将文本光标放在高亮显示的代码上，按下 Alt+Enter ，然后选择创建缺失的 TypeScript 声明。