Protractor – elementexplorer.js

elementexplorer.js is a bonus tool from protractor that helps you debug your selectors on page objects live! It’ll make your life on writing protractor tests a lot easier! This post assumes that you have worked with protractor before and have it installed on your machine.

Start selenium

Before starting elementexplorer.js, you need to first start selenium:

> webdriver-manager update
> webdriver-manager start

# or you can start webdriver with a specific port; default is 4444
> webdriver-manager start --seleniumPort XXXX

In the browser opened by selenium, navigate to your angular web app.

Assuming that you have the following binding in your application:

$scope.yourName = "Wahaha" 
<input ng-model="yourName" />


Use elementexplorer

Open a new terminal. Then locate it in node_modules folder and run the following command

> ./node_modules/protractor/bin/elementexplorer.js

Using list() in elementexplorer:

> list(by.model('yourName'))

> list(by.model('notExisted'))

> list(by.binding('yourName'))
['Wahaha']  //Note: this value can be changed on page