Skip to content

Modus-Logo-Long-BlackCreated with Sketch.

  • Services
  • Work
  • Blog
  • Resources

    OUR RESOURCES

    Innovation Podcast

    Explore transformative innovation with industry leaders.

    Guides & Playbooks

    Implement leading digital innovation with our strategic guides.

    Practical guide to building an effective AI strategy
  • Who we are

    Our story

    Learn about our values, vision, and commitment to client success.

    Open Source

    Discover how we contribute to and benefit from the global open source ecosystem.

    Careers

    Join our dynamic team and shape the future of digital transformation.

    How we built our unique culture
  • Let's talk
  • EN
  • FR

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.

Protractor and Elementor - 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!

Posted in Application Development
Share this

Mallory Mooney

Mallory Mooney was a QA Engineer at Modus Create until 2018. She has experience in developing test automation for a broad range of technologies as well as establishing QA processes for projects. She’s an advocate for open source automation tools and believes in building the “right” tests for the job - not just an arbitrary number of them. Aside from her work, Mallory enjoys photography, Texas BBQ, and a good hard cider.
Follow

Related Posts

  • Hybrid Application Testing with Protractor and Appium
    Hybrid Application Testing with Protractor and Appium

    Testing hybrid projects can be challenging. The number of mobile devices the product has to…

  • Debugging ProtractorJS Automated Tests in WebStorm
    Debug Protractor Automated Tests in Webstorm

    Debugging automated tests assures that the tests behave as intended and avoid false positive /…

Want more insights to fuel your innovation efforts?

Sign up to receive our monthly newsletter and exclusive content about digital transformation and product development.

What we do

Our services
AI and data
Product development
Design and UX
IT modernization
Platform and MLOps
Developer experience
Security

Our partners
Atlassian
AWS
GitHub
Other partners

Who we are

Our story
Careers
Open source

Our work

Our case studies

Our resources

Blog
Innovation podcast
Guides & playbooks

Connect with us

Get monthly insights on AI adoption

© 2025 Modus Create, LLC

Privacy PolicySitemap
Scroll To Top
  • Services
  • Work
  • Blog
  • Resources
    • Innovation Podcast
    • Guides & Playbooks
  • Who we are
    • Careers
  • Let’s talk
  • EN
  • FR