Setting up Protractor with latest Eclipse (Windows) – Plugins & Settings

I have seen in case of many of the technologies, blogs and other contents on the internet becomes obsolete over time. After update setting up tools and plugins become entirely different. When a newbie tries to start with faces issues and the internet does not help. Takes lot of time.

In case of Protractor and Eclipse setup, I have observed the above situation. I am going to explain here how to setup protractor with the latest eclipse.

Protractor test automation is done using different IDEs. Mainly,

• Visual studio Professional
• Visual studio code
• Eclipse
• Sublime Text
• Atom Editor
• Webstorm

Most of them who have used Java for test automation with Selenium will definitely prefer using Eclipse. So am I.. 🙂

Download latest Eclipse (current version Eclipse 2019-09). There are different versions of eclipse. Select one of the below three (I would say the first one – Eclipse IDE for Java Developers)

• Eclipse IDE for Java Developers
• Eclipse IDE for Enterprise Java Developers
• Eclipse IDE for Javascript and Web Developers

Make sure that Java 1.8 or higher is installed on your machine which is absolutely required for eclipse installation.

Create two different folders in your D: drive (drive other than having operating system)

• EclipseInstallations –> eclipse201909
• EclipseWorkspaces –> ProtractorAuto

This is done just to have a structured way. You can create your own folders and subfolders.

Once the download is done, double click the exe file and then select the folder where the eclipse should be installed. Then click install button.

After installation, select the workspace and launch the eclipse.

For installing new plugins we need to go to Eclipse marketplace and select the required plugins. Below are the two plugins required for protractor. Open eclipse — > Help –> Eclipse Marketplace –> Search below plugins –> click Install (select I agree for license)

• Wild Web Developer (previously AngularJS)
• Nodeclipse.github.io

Launch the eclipse after completing the installation of both the plugins. Try to create a new project which should show below options.

• Javascript
• Node

Now, the eclipse IDE setup is completed. What else is required to start with writing protractor test automation scripts?

• NodeJS
• npm
• Protractor

Download NodeJS from here and then install by double clicking the msi file (download 12.13.1 LTS). Verify the installation of node and npm by executing the below commands in the command prompt.

• node –version
• npm –version

Install protractor:

npm install -g protractor

Update the webdriver-manager by executing the below command:

webdriver-manager update

Verify the installation of protractor and webdriver with the following commands.

• protractor –version
• webdriver-manager status

This completes the installation and setup of protractor with eclipse. Now, we will go ahead and write a simple test script and run.

After completion of the setup we need to create a new Javascript project and run tests. That should be the end of basic setup. Okay, let us go ahead!!

Open Eclipse –> Create new Javascript project –> name as “learnprotractor”

Add two of the javascript files:  conf.js and example_spec.js

conf.js

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

// An example configuration file.

exports.config = {
  directConnect: true,

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome'
  },

  // Framework to use. Jasmine is recommended.
  framework: 'jasmine',

  // Spec patterns are relative to the current working directory when
  // protractor is called.
  specs: ['example_spec.js'],

  // Options to be passed to Jasmine.
  jasmineNodeOpts: {
    defaultTimeoutInterval: 30000
  }
  
};

[/dm_code_snippet]

example_spec.js

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    browser.get('http://www.angularjs.org');

    element(by.model('yourName')).sendKeys('Julie');

    var greeting = element(by.binding('yourName'));

    expect(greeting.getText()).toEqual('Hello Julie!');
  });

  describe('todo list', function() {
    var todoList;

    beforeEach(function() {
      browser.get('http://www.angularjs.org');

      todoList = element.all(by.repeater('todo in todoList.todos'));
    });

    it('should list todos', function() {
      expect(todoList.count()).toEqual(2);
      expect(todoList.get(1).getText()).toEqual('build an AngularJS app');
    });

    it('should add a todo', function() {
      var addTodo = element(by.model('todoList.todoText'));
      var addButton = element(by.css('[value="add"]'));

      addTodo.sendKeys('write a protractor test');
      addButton.click();

      expect(todoList.count()).toEqual(3);
      expect(todoList.get(2).getText()).toEqual('write a protractor test');
    });
  });
});

[/dm_code_snippet]

Create one more file: testrunner.bat (windows batch file)

[dm_code_snippet background=”yes” background-mobile=”yes” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” copy-text=”Copy Code” copy-confirmed=”Copied”]

set PATH=%PATH%;C:\Users\{InsertUsernameHere}\AppData\Roaming\npm;C:\Program Files\nodejs
protractor conf.js

[/dm_code_snippet]

Eclipse project should look like below screenshot:

Add a run configuration:

• Go to Run –> External tools –> External tools configuration
• Click Program –> New button (“+” symbol on left top) –> this creates a new run configuration (refer below screenshot)
• Click “Browse workspace” and select “testrunner.bat” file
• Click “Browse workspace” and select the “Working directory” (learnprotractor)
• Provide the name for this runner as “protestrunner”
• Click Apply and close 

As in the above picture, click the “protestrunner” external run configuration. This will run the sample test. I hope this will help to setup the protractor with eclipse and run a sample test.