elementor

Elementor lets you test Protractor selectors from your browser and IDE. You can enter a protractor locator or expression and elementor will test it against a live protractor instance.

Video tutorial

Get elementor

Elementor is a Node.js application. Install it through npm:

$ npm install elementor -g

How to launch

Elementor needs chromedriver and a running selenium server. To download the dependencies and start the selenium server you need to use protractor's webdriver manager. Open your terminal and run the following commands:

# Get protractor 
$ npm install protractor -g
 
# Download chromedriver and the selenium server 
$ webdriver-manager update
 
# Start the server 
$ webdriver-manager start

In another terminal run elementor with an optional url:

$ elementor https://angularjs.org

If you need to pass flags to chrome use the --chrome flag. Use spaces to separate the flags.

$ elementor https://angularjs.org --chrome="--disable-web-security --some-other-flag=123"

For applications not using Angular, just add the --nonAngular flag:

$ elementor https://google.com --nonAngular

How it works

Elementor extends protractor's elementexplorer in two ways:

• It opens a server on port 13000 that listens for commands.
• It launches chrome with a custom extension that lets you test on the browser.

The extension includes two components:

• A popup to enter protractor locators and expressions.
• A developer tools window to suggest locators for the selected element.

Using the popup

The popup is located next to the omnibox. Open it, enter a locator or an expression, and hit ENTER. The input will be evaluated by elementor and the results will be displayed on the popup menu.

When you enter a locator starting with by.<strategy> (e.g. by.css, by.model, by.binding, etc.) then it will be executed as a count expression element.all(<your locator>).count(). For example:

by.css('div') will be evaluated as element(by.css('div')).count()

You can also enter commands:

• browser.get('http://protractortest.org')
• element(by.css('.some-class')).getText()
• element(by.binding('someBinding')).sendKeys('hello')

Using the developer tools

The developer tools extension tries to find protractor locators for the currently selected item. Go to Developer tools > Elements and then on the side pane (Styles, Computed, etc.) choose protractor.

The DevTools extension is limited because you cannot use it in the same browser tab launched by the elementor. To use the extension you need to duplicate the first tab of the browser (right click on tab > duplicate). Once the dev tools in the second tab is open then it will provide locator suggestions every time you change the selected element in the elements tab.

When you open the DevTools window, ChromeDriver is automatically disconnected. When ChromeDriver receives a command, if disconnected, it will attempt to close the DevTools window and reconnect. source.

Using the Webstorm / IntelliJ plugin

You can use elementor from your IDE with Webstorm or IntelliJ. Follow the installation instructions here.

Using the Sublime plugin

A sublime plugin is available. Follow the installation here.

Using the Emacs plugin

There is also an emacs plugin available here. Installation instructions are in the plugin's README.