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:
- WebStorm (from jetbrains but paid)
- Notepad++ (haha.. goodluck with that)
- Sublimetext (Same as notepad++)
- Eclipse
- 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
-
- 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!