Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
February 3, 2017

Protractor and Elementor

Angular, Community and Events, JavaScript, Quality Assurance

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.

Protractor and Elementor - Filled in Text Field

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 Angular, Community and Events, JavaScript, Quality Assurance
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 /…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top