Recently started digging into protractor for websites based on AngularJS. Selenium gave me a headache while trying to automate the site. But then again, which IDE to choose for Protractor. If you google it out then suggestions will be:

  1. WebStorm (from jetbrains but paid)
  2. Notepad++ (haha.. goodluck with that)
  3. Sublimetext (Same as notepad++)
  4. Eclipse
  5. IntelliJ

This article will simply outline the setup on IntelliJ. I preferred this because all of my automation frameworks are built using IntelliJ (Appium and Selenium) and frankly I’m love with this IDE. Difficult part was to configure protractor on IntelliJ. Nothing fancy, this is not a tutorial on learning Protractor. But simply setup process.

Step1: Install Node.js

To run Protractor tests you need Node.js installed on your system. Download and install the correct package from https://nodejs.org/en/download/

This will give you the ability to use npm on your system through command-line.

Step2: Install Protractor

Open the command-line/terminal and enter the following

npm install -g protractor

Step3: Install Selenium Server

webdriver-manager update

Step4: Install IntelliJ Ultimate Edition

Unfortunately the community version of IntelliJ does not support NodeJS. Hence you’ll have to purchase the Ultimate Edition. During the first launch of IntelliJ UE, you’ll be prompted to install the plugins. Select AngularJS and NodeJS from the options.

Step5: Configure the Project

To run Protractor, you need two files, a configuration (conf.js) and specification (spec.js) file. Add these files to the source directory i.e. Project/ Sample of conf.js

exports.config = {
    framework: 'jasmine',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['spec.js']
}

Sample of spec.js

describe('Protractor Testing', function() {
    it('should open google page', function() {
        browser.ignoreSynchronization=true; // This is to be added if your application is non-angular
        browser.get('http://www.google.com');
        expect(browser.getTitle()).toEqual('Google');
        element(by.css('input.gsfi')).sendKeys('Hello testing')
    });
});

Now you have two files, you can proceed to Protractor configuration.

Step6: Run configuration

    1. Click on Run/Debug Configuration

2. Select “Protractor” from Add New Configuration menu.

3. Configuration

Name – This is name of your configuration Configuration file – Enter the path to your conf.js which you created in previous Step5. Node Interpreter – This is already filled. Its the location of your Node.js installation Protractor Package – This is also already filled. Its the location of your Protractor installation which you did via npm in Step2. 4. Save the configuration by clicking “OK”

Step7: Start Selenium Server

This is needed in order to run Protractor tests since protractor is nothing but a wrapper on the webdriver. In the command-line/terminal, enter following code

webdriver-manager start

Now you are ready to run the Protractor test which you created in IntelliJ. Without starting the webdriver your tests will throw errors.

Step9: Executing Tests

When you run your Protractor tests, you’ll see the same behavior as Selenium. Chrome browser will open, will navigate to Google and enter Hello Testing in search.

Step8: Results

Once you execute the test you’ll see the output in IntelliJ as below

"C:\Program Files\nodejs\node.exe" C:\Users\Ashish\AppData\Roaming\npm\node_modules\protractor\bin\protractor "C:\Program Files (x86)\JetBrains\IntelliJ IDEA 2016.3\plugins\JavaScriptLanguage\helpers\protractor-intellij\lib\protractor-intellij-config.js" --intellijOriginalConfigFile=C:\Users\Ashish\IdeaProjects\com.protractortest.myapp\conf.js
[15:07:10] I/launcher - Running 1 instances of WebDriver
[15:07:10] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
[15:07:20] W/runner - Ignoring unknown extra flags: intellijOriginalConfigFile. This will be an error in future versions, please use --disableChecks flag to disable the  Protractor CLI flag checks.
Started
[15:07:27] W/element - more than one element found for locator By(css selector, input.gsfi) - the first result will be used

1 spec, 0 failures
Finished in 7.13 seconds

[15:07:29] I/launcher - 0 instance(s) of WebDriver still running
[15:07:29] I/launcher - chrome #01 passed

Process finished with exit code 0

In the commandline/terminal you’ll see something like this:

Starting ChromeDriver 2.30.477700 (0057494ad8732195794a7b32078424f92a5fce41) on port 16410
Only local connections are allowed.
15:07:20.016 INFO - Detected dialect: OSS
15:07:20.016 INFO - Done: [new session: Capabilities [{count=1, browserName=chrome}]]
15:07:20.062 INFO - Executing: [script wait: 11000])
15:07:20.078 INFO - Done: [script wait: 11000]
15:07:20.463 INFO - Executing: [get: http://www.google.com/])
15:07:26.251 INFO - Done: [get: http://www.google.com/]
15:07:26.269 INFO - Executing: [get title])
15:07:26.287 INFO - Done: [get title]
15:07:26.312 INFO - Executing: [find elements: By.cssSelector: input.gsfi])
15:07:27.047 INFO - Done: [find elements: By.cssSelector: input.gsfi]
15:07:27.079 INFO - Executing: [send keys: 0 [[ChromeDriver: chrome on XP (262234d80e67abd462830edd1f308a40)] -> css selector: input.gsfi], [H, e, l, l, o,  , t, e, s, t, i, n, g]])
15:07:27.534 INFO - Done: [send keys: 0 [[ChromeDriver: chrome on XP (262234d80e67abd462830edd1f308a40)] -> css selector: input.gsfi], [H, e, l, l, o,  , t, e, s, t, i, n, g]]
15:07:27.578 INFO - Executing: [delete session: 20de27c0-af19-44a7-a819-300f81fa7cd8])
15:07:29.464 INFO - Done: [delete session: 20de27c0-af19-44a7-a819-300f81fa7cd8]
15:10:01.123 INFO - Executing: org.openqa.selenium.remote.server.handler.GetAllSessions@55ef3759)
15:10:01.124 INFO - Done: org.openqa.selenium.remote.server.handler.GetAllSessions@55ef3759

Good luck automating stuff on Protractor with IntelliJ!

Leave a comment