testing with ProtractorJS, protractorJS Locators, explained for dummies

sdet.ro
sdet.ro
Aug 25, 2017 · 2 min read
ProtractorJS Locators — explained for dummies

Locators, are ways to find HTML elements, and use them. You can use a locator to find a button's location in a page. Locators are extremely useful in automation or crawling.

The role of a locator is to return an elementFinder. I’ll try even simpler. The role of a locator is to locate a piece of HTML element, that you can see in the browser for further use.

Why do we need the (protractor) locators?

a) We need to make sure that something specific still happens in an application. You need to make sure that the login button is still there. You need to find that button, programmatically. “locators” are a way for doing this. For finding a specific element.

b) Protractor Locators, are the framework’s specific locators.

For example, you will not find a “ng-repeat”, anywhere beside Angular. Since Protractor was developed for testing Angular, they have provided a way for locating their specific Angular DOM elements.

Webdriver/Selenium/Protractor locators? -You’re driving me crazy!

Mentioned selectors above, are framework’s specific locators. This does not mean that you can not import them and use them somewhere else. It might be somehow useless, but you can!

So far, there are several types of Locators.

I. Locators added by Protractor(angular/google) team, How to use them

addLocator Add a locator to this instance of ProtractorBy. — this is for creating a custom locators. You can create custom then load them later in config. I actually wrote few of my own, it’s not very complicated.

Example:

// Add the custom locator.

by.addLocator(‘buttonTextSimple’,

function(buttonText, opt_parentElement, opt_rootSelector) {

// This function will be serialized as a string and will execute in the

// browser. The first argument is the text for the button. The second

// argument is the parent element, if any.

var using = opt_parentElement || document,

buttons = using.querySelectorAll(‘button’);

// Return an array of buttons with the text.

return Array.prototype.filter.call(buttons, function(button) {

return button.textContent === buttonText;

});

});

// Use the custom locator.

element(by.buttonTextSimple(‘Go!’)).click();

binding Find an element by text binding.

Example:

element(by.binding(‘person.name’));

exactBinding Find an element by exact binding.

Example:

element(by.exactBinding(‘person-email’));

model Find an element by ng-model expression.

Example:

element(by.model(‘person.name’));

buttonText Find a button by text.

Example:

element(by.buttonText(‘Save’));

Read, learn and contribute! View the whole article here:

http://thisqa.com/2017/08/protractor-locators-for-beginners/

Now you wonder. Why did I wrote this article? I want to help the community and give back. I’ve been helped countless times, now it’s my turn to give back.

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade