Intro
Locators and elements are the foundation of any automated test (youdontsay). You spend a good portion of your time hunting down the right elements to interact with for tests. Sometimes, you find the right elements through trial, error, and multiple test runs. Not incredibly efficient, right? Thankfully, there are some great options available that help make test development a little less painful. Elementor is one such option that lets you search for and manipulate elements within a browser. Let’s take a look.
Elementor Explained
Elementor is a Node.js app available on GitHub. This project also includes plugins for Webstorm and Sublime, but for this tutorial we’ll just take a look at the features baked right in for Chrome. Since it’s built for Protractor it requires chromedriver and a running selenium server. Don’t forget to have those installed.
Elementor provides two components. First, it launches a separate Chrome browser with a custom extension built in to test your locators and elements. Second, it provides an additional pane in Chrome’s Developer Tools that helps suggest Protractor locators based on an element on the page you select.
To install simply run npm install elementor -g. Once installed start up the selenium server with webdriver-manager start. Finally, in another terminal session start Elementor with elementor https://angularjs.org. The output should look similar to the following:
[20:35:14] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
[20:35:15] I/protractor -
[20:35:15] I/protractor - ------- Element Explorer -------
[20:35:15] I/protractor - Starting WebDriver debugger in a child process. Element Explorer is still beta, please report issues at github.com/angular/protractor
[20:35:15] I/protractor -
[20:35:15] I/protractor - Type <tab> to see a list of locator strategies.
[20:35:15] I/protractor - Use the `list` helper function to find elements by strategy:
[20:35:15] I/protractor - e.g., list(by.binding('')) gets all bindings.
[20:35:15] I/protractor -
Server listening on 127.0.0.1:6969
Done starting protractor
Starting elementor
Elementor is listening on http://localhost:13000
Getting page at: https://angularjs.org
Connected. Sending command: browser.get('https://angularjs.org');
Elementor is ready!
This will cause a new Chrome browser window to pop up with the Elementor extension and navigate to the specified url. Let’s first take a look at what’s available in Developer Tools. In that new browser window, duplicate the tab. Why? According to the project, it’s a limitation of the extension as it won’t work in the same tab that was launched.
Now go to dev tools > Elements and a new Protractor pane will be available with the Styles, Computed, Event Listeners, etc. pane groupings. For your viewing pleasure, below is a gif of the steps.
If you select one of the elements in the Element pane, you will see a list of available locators under Protractor. For example, inspecting the “Name” text field on the page will generate the following locator options:
by.css('input[ng-model="yourName"]'):"1"
by.css('input[placeholder="Enter a name here"]'):"1"
by.css('input[type="text"]'):"4"
by.model('yourName'):"1"
The number beside each locator represents how many times that particular element is used. Now that you have locators to work with, you can use one of them to test right on the page too. Copy one of the locators and go back to your first Chrome tab. Click on the Elementor extension, paste in the locator, and hit “Submit.” Elementor will provide a count of the element that you can manipulate further.
For example, element.all(by.css('input[ng-model="yourName"]')).count() can be updated to element.all(by.css('input[ng-model="yourName"]')).sendKeys(‘Strong Bad’) and the text field will be filled in accordingly.
That’s all there is to it. Elementor can be a great option for pinpointing locators and elements needed for a test. It makes finding and testing a little easier. Check out the project in GitHub and let us know what other tools you’ve used to help your workflow!
