Install:

npm install -g elementor

 

Then run:

webdriver-manager start

 

Lets say if we want to test 'http://angular.github.io/protractor/#/api' page:

elementor http://angular.github.io/protractor/#/api

 

Notice: close the chrome debug tool first! Otherwise protractor cannot run!

 

• When the page open, right click the tab, choose duplicate!
• Choose the second tab, open the chrome debugger tool
• In debugger tool, in elements tab, inspet one element, see the protractor tab:
  

The number "1" you see here indicate that there is only 1 element match hte locators. 

 

 

Let's select:

by.css("#searchInput")

 

• Go to the first window, click the extension tool:

• Type what you want in the search input:

Then you can find the element you want.

 

• You can use 'sendKeys()' function to trigger seach:

element.all(by.css("#searchInput")).sendKeys("filter")

 

• You can use 'clear()' function to clean the input:

element.all(by.css("#searchInput")).clear()

 

---------------------------------

 

You can also use webstorm plugin for testing. Install the 'elementor' plugin.

When imaging you are doing some unit testing.

 

You can select the code you want, right click, in the pop menu select 'Test selected locator'.