PhpStorm
 
2022.2
Shortcuts: Windows
Get PhpStorm
You are viewing the documentation for an earlier version of PhpStorm.
  1. Web Technologies
  2. JavaScript
  3. Testing JavaScript
  4. Protractor

Protractor

Last modified: 23 May 2022

Required plugin: JavaScript and TypeScript

The plugin is bundled with PhpStorm and enabled by default.

Protractor is a test framework for Angular and AngularJS applications. Protractor executes tests against your application running in a real browser, which ensures correctness and trustworthiness of test results. PhpStorm integrates with Protractor so you can run and debug your tests from inside the IDE. You can see the test results in a treeview and easily navigate to the test source from there.

Before you start

Download and install Node.js.

Installing Protractor

You can install Protractor locally, in your project, or globally. Global installation is preferable.

To install Protractor globally

  1. In the embedded Terminal (Alt+F12) , type:

    npm install -g protractor

  2. To download the necessary binaries, type webdriver-manager update. See also Getting Started on the Protractor official website.

Running tests

Protractor tests are launched only through a run/debug configuration.

To create a Protractor run configuration

  1. Open the Run/Debug Configuration dialog (Run | Edit Configurations on the main menu), click the Add button in the left-hand pane, and select Protractor from the list. The Run/Debug Configuration: Protractor dialog opens.

    tip

    Alternatively, select a test file in the Project tool window and select Create <filename> from the context menu.

  2. Specify the Node.js interpreter to use. This can be a local Node.js interpreter or a Node.js on Windows Subsystem for Linux.

  3. Specify the location of the protractor package and the path to the protractor.conf.js configuration file. If you followed the standard installation, PhpStorm detects all these paths and displays them in the corresponding fields.

To run tests via a run configuration

  1. Start the Selenium Server manually or configure it to start automatically in protractor.conf.js. For details, see the Protractor official website.

  2. Select the Protractor run/debug configuration from the list on the main toolbar and click the Run icon  to the right of the list.

    ws_select_run_configuration_protractor.png

  3. View and analyze messages from the server in the <current_run_configuration_name> tab of the Run tool window.

Navigation

With PhpStorm, you can jump between a file and the related test file or from a test result in the Test Runner Tab to the test.

Debugging tests

A debugging session for Protractor tests is started only through a run/debug configuration.

To start debugging tests

  1. Create a Protractor run/debug configuration as described above.

  2. Select the Protractor run/debug configuration from the list on the main toolbar and click Run with Coverage  to the right of the list.

    ws_select_run_configuration_protractor.png

  3. In the Debug tool window that opens, proceed as usual: step through the tests, pause and resume test execution, examine the test when suspended, run JavaScript code snippets in the Console, and so on.

See also

Reference