Cypress应用

IDE集成

info

您将学习到

• 如何在IDE中打开文件
• 流行IDE的扩展和插件
• 如何在IDE中设置智能代码补全

文件打开器偏好设置

当点击命令日志中的文件路径或错误时，Cypress会尝试在您的系统中打开该文件。如果编辑器支持文件内联高亮显示，文件将在光标定位到相关行和列的位置打开。

首次点击文件路径时，Cypress会提示您选择首选的文件打开位置。您可以选择在以下位置打开：

• 文件系统（例如MacOS的Finder，Windows的文件资源管理器）
• 系统中安装的IDE
• 指定的应用程序路径

caution

Cypress会尝试查找系统上可用的文件编辑器并显示为选项。如果首选编辑器未列出，您可以通过选择其他来指定其（完整）路径。Cypress将尽力打开文件，但不能保证适用于所有应用程序。

设置文件打开器偏好后，任何文件将自动在所选应用程序中打开，无需再次选择。如需更改选择，可在Cypress的设置选项卡中点击文件打开器偏好进行调整。

扩展与插件

有许多第三方IDE扩展和插件可帮助将您的IDE与Cypress集成。

Visual Studio Code

• Cypress Fixture-IntelliSense: 通过为现有fixture提供智能感知来支持cy.fixture()。
• Cypress Helper: 提供多种与Cypress集成的辅助工具和命令。
• Cypress Snippets: 实用的Cypress代码片段。
• Cypress Snippets: 包含最新和最常见的Cypress代码片段。
• Open Cypress: 允许直接从VS Code打开Cypress规范和单个it()块。
• Test Utils: 通过键盘快捷键或命令面板轻松添加或移除.only和.skip修饰符。
• Cypress Test Explorer: 帮助您直接从编辑器发现、导航和运行Cypress测试。

IntelliJ平台

• JetBrains Aqua: 专为UI测试自动化设计的IDE，全面支持Cypress。功能包括自动补全、IDE内调试、测试搜索等。

• Test Automation插件: JetBrains官方开发维护的插件，提供强大的Cypress支持，兼容IntelliJ IDEA、CLion、GoLand、PhpStorm、PyCharm、Rider、RubyMine和WebStorm。包含JetBrains Aqua中的所有功能。

• Cypress Support: 将Cypress集成到Intellij通用测试框架下。

智能代码补全

编写测试

功能

Cypress支持IntelliSense。它能在编写测试时直接在IDE中提供智能代码建议。典型的IntelliSense弹出窗口会显示命令定义、代码示例和完整文档页面的链接。

输入Cypress命令时自动补全

编写和悬停在Cypress命令上时的签名帮助

输入断言链时自动补全，包括仅在测试DOM元素时显示DOM断言

在开发环境中设置

本文档假设您已安装Cypress。

Cypress内置了TypeScript类型声明。现代文本编辑器可以使用这些类型声明在规范文件中显示IntelliSense。

三斜线指令

在输入Cypress命令或断言时，查看IntelliSense的最简单方法是在JavaScript或TypeScript测试文件头部添加三斜线指令。这将基于每个文件启用IntelliSense。复制下面的注释行并粘贴到您的规范文件中。

/// <reference types="Cypress" />

如果您编写了自定义命令并为其提供了TypeScript定义，即使项目仅使用JavaScript，也可以使用三斜线指令显示IntelliSense。例如，如果自定义命令写在cypress/support/commands.js中并在cypress/support/index.d.ts中描述，可以使用：

// Cypress对象"cy"的类型定义
/// <reference types="cypress" />

// 如"createDefaultTodos"等自定义命令的类型定义
/// <reference types="../support" />

参考cypress-example-todomvc仓库获取工作示例。

如果三斜线指令无效，请参考TypeScript的编辑器支持文档中关于您的代码编辑器的部分，并按照IDE的说明首先在开发环境中配置TypeScript支持和智能代码补全。Visual Studio Code、Visual Studio和WebStorm内置了TypeScript支持——其他所有编辑器都需要额外设置。

通过jsconfig引用类型声明

无需为每个JavaScript规范文件添加三斜线指令，某些IDE（如VS Code）能理解项目根目录下的jsconfig.json文件。在该文件中，您可以包含Cypress模块和测试文件夹。

{
  "include": ["./node_modules/cypress", "cypress/**/*.js"]
}

现在，智能代码补全应在常规JavaScript规范文件中显示cy命令的帮助。

通过tsconfig引用类型声明

在cypress文件夹中添加一个tsconfig.json，并配置以下内容，应能使智能代码补全正常工作。

{
  "compilerOptions": {
    "allowJs": true,
    "types": ["cypress"]
  },
  "include": ["**/*.*"]
}

另请参阅

• 使用正确的TypeScript类型向全局window添加自定义属性