WebStorm 2025.2 Help

Cypress

Cypress是用于 Web 应用程序的开源测试框架。 它为开发人员提供了一种快速且可靠的端到端测试自动化解决方案。 凭借其独特的架构和全面的功能集,Cypress 能够高效地编写测试、进行调试,并可与流行的框架和 CI/CD 流水线集成。

创建新的 Cypress 项目

  1. 在主菜单中,转到 文件 | 新建 | 项目

    或者,如果您在 欢迎 页面,请点击 新建项目

  2. 从左侧列表中选择 Cypress

    创建新的 Cypress 项目
  3. 为新项目命名,并在必要时更改其位置。

  4. 指定 Node 解释器

  5. 指定 包管理器

  6. 语言 列表中选择您要使用的语言。

  7. (可选)启用 添加示例代码 参数。

  8. (可选)启用 配置E2E 测试 参数,以创建一组用于定义自定义命令或应用全局覆盖的支持文件,该支持文件将应用于您的 spec 文件。

  9. (可选)启用 配置组件测试 参数,以设置并配置用于组件测试的框架。 启用 配置组件测试 参数后,从列表中选择所需框架。

    创建包含组件测试的 Cypress 项目
  10. 点击 创建

将根据您选择的选项创建新项目。

向代码添加元素

  1. 打开包含要添加元素的文件。

  2. 点击右侧边栏中的 Web 检查器按钮 ,以打开 网页检查器 工具栏窗口。

  3. 在地址栏中指定页面的 URL。

    地址栏控制项
  4. 点击 页面元素选择按钮 ,然后在 Web 检查器中选择要添加的元素。

    在页面中选择元素
  5. 选中元素后,点击 添加元素到代码 以将该元素添加到代码中。

    “添加元素到代码”按钮

    如要添加特定类型的选择器(IDName包含类的标签等),请点击 通过以下方式添加元素到代码 并选择所需选项。

    通过以下方式添加元素到代码

    如果您想在 CSS 与 XPath 定位器之间切换,请点击 并选择所需定位器类型。

    选择定位器类型

最终会生成一段代码并添加到代码编辑器中。

运行测试

  • 如要运行测试,请点击测试类或测试方法旁边的 运行按钮 行内图标,然后从列表中选择 运行 选项。

    或者,将光标置于测试类上,以运行该类中的所有测试,或放置在测试方法上,然后按下 Ctrl+Shift+F10

您可以使用运行/调试配置以更灵活的方式运行测试。 有关详细信息,请参阅 运行测试

查看测试结果

测试运行完成后,其结果将显示在 测试运行器 选项卡的 运行 工具窗口中。 在该选项卡中,您可以重新运行测试、导出并导入测试结果、查看每项测试的运行时长以及执行其他操作。

测试结果显示在运行工具窗口的 Test Runner 选项卡中

有关详细信息,请参阅 查看测试结果

调试测试

修改运行/调试配置

如果您希望修改测试的启动属性,请编辑运行/调试配置:

  1. 在运行/调试配置切换器中点击当前配置,然后选择 编辑配置(R)… 选项。

    选择运行/调试配置
  2. 运行/调试配置 对话框中,选择您要编辑的配置。

  3. 配置所需的启动属性。

    配置启动属性
  4. 应用更改并点击 确定

如需了解有关运行/调试配置的更多信息,请参阅 运行/调试配置

自定义定位器模板

如果您希望自定义所选元素添加到代码中的方式,可以修改模板:

  1. 点击状态栏中的框架名称。 界面自动化框架 菜单将打开。

    自定义模板
  2. 选择 自定义模板 选项。

  3. 文件与代码模板 对话框中,从列表中选择所需的框架。

    自定义模板
  4. 重写用于 Web 元素定位器的代码生成算法。

  5. 点击 确定 以保存更改。

最终,定位器将根据更新后的代码生成算法添加到代码中。

打开 Cypress Launchpad

如有需要,您可以在 Cypress Launchpad 中打开当前项目。 为此,请按下 ⌘ ⌃ ]

Cypress Launchpad
最后修改日期: 2025年 9月 26日