WebStorm 2025.3 Help

Protractor

Protractor 是一个用于 AngularAngularJS 应用程序的测试框架。 Protractor 在实际浏览器中对您的应用程序执行测试,从而确保测试结果的正确性和可信度。 WebStorm 与 Protractor 集成,所以您可以在 IDE 内运行和调试您的测试。 您可以在树状视图中查看测试结果,并从中轻松导航到测试源代码。

开始之前

  1. 请确保您的计算机上安装了 Node.js

  2. 请确保在设置中启用了 Angular 和 AngularJS 插件。 按 Ctrl+Alt+S 打开设置,然后选择 插件。 点击 已安装 选项卡。 在搜索字段中输入 Angular 和 AngularJS。 有关插件的更多信息,请参阅 插件管理

安装 Protractor

您可以在本地、项目中或全局安装 Protractor。 全局安装是首选。

全局安装 Protractor

  1. 在内置的 终端Alt+F12 )中,输入:

    npm install -g protractor

  2. 要下载必要的二进制文件,请输入 webdriver-manager update。 另请参阅 Protractor 官方网站上的入门指南

运行测试

只能通过运行/调试配置启动 Protractor 测试。

创建一个 Protractor 运行配置

  1. 打开 运行/调试配置对话框(运行 | 编辑配置 在主菜单中),点击 添加按钮 在左侧窗格中,然后从列表中选择 Protractor运行/调试配置:Protractor对话框打开。

  2. 指定要使用的 Node.js 运行时。

    如果您选择 项目 别名, WebStorm 将自动使用在 JavaScript 运行时 页面上 Node.js 运行时 字段中的项目默认解释器。 在大多数情况下, WebStorm 会检测到项目的默认运行时,并自动填写该字段。

    您还可以选择其他已配置的本地或远程解释器,或点击 “浏览”按钮 并配置一个新的解释器。

    有关更多信息,请参阅 配置远程 Node.js 运行时配置本地 Node.js 运行时在适用于 Linux 的 Windows 子系统上使用 Node.js

  3. 指定 protractor 包的位置和 protractor.conf.js 配置文件的路径。 如果您按照标准安装进行操作,WebStorm 会检测到所有这些路径并将它们显示在相应的字段中。

  4. 指定要运行的测试。 这可以是一个特定的测试或套件,整个测试文件或包含测试文件的文件夹。

通过运行配置运行测试

  1. 手动启动 Selenium 服务器,或在 protractor.conf.js 中将其配置为自动启动。 如需更多信息,请参见 Protractor 官方网站

  2. 从配置列表中选择 Protractor 运行/调试配置,并点击 运行图标   在列表中或在工具栏上。

    选择运行/调试配置
  3. <current_run_configuration_name> 选项卡中的 运行 工具窗口,查看和分析来自服务器的消息。

导航

使用 WebStorm,您可以在文件与相关的测试文件之间跳转,或从 测试运行器选项卡 中的测试结果跳转到测试。

  • 在编辑器中打开文件,选择上下文菜单中的 转到 | 测试(S)转到 | 测试对象 ,或者直接按 Ctrl+Shift+T ,即可在测试和其主题之间进行切换。

  • 从测试结果跳转到测试定义,双击 测试运行器 选项卡中的测试名称,或从上下文菜单中选择 跳转到源 ,或者按 F4。 测试文件在编辑器中打开时,文本光标放置在测试定义处。

调试测试

仅通过运行/调试配置启动 Protractor 测试的调试会话。

开始调试测试

  1. 创建 Protractor 运行/调试配置 如上所述

  2. 从配置列表中选择 Protractor 运行/调试配置,并点击 使用覆盖率运行 &#xa0; 在列表中或在工具栏上。

    选择运行/调试配置
  3. 在打开的 调试工具窗口 中,按常规操作: 逐步执行程序停止并恢复 程序执行, 在挂起时检查程序 ,探索调用堆栈和变量,设置监视,评估变量, 查看实际 HTML DOM 等。

最后修改日期: 2025年 12月 8日