Difference between protractor locators

Question

I was going through the protractor guide here: https://github.com/angular/protractor/blob/master/docs/api.md#api-protractor

It says in order to locate a element, I could use

var temp = element(by.css("someclass"));

or alternatively

var temp1 = ptor.findElement(protractor.By.css('someclass'))

Which kind of locator is to be used when ? Could someone pls clarify

Answer 1

They are the same. element is the preferred syntax because it is shorter and because you can chain locators and use some fancy protractor features. Protractor extends the webdriver api and that is why you can use the same functions that you would use in plain webdriver.

For example, the following expressions are equivalent:

ptor.findElement(by.css('.foo')).getText()

element(by.css('.foo')).getText()

$('.foo').getText()

To look for multiple elements use:

ptor.findElements(by.css('.foo'))

element.all(by.css('.foo'))

$$('.foo')

There are many examples in the api.md document:

https://github.com/angular/protractor/blob/master/docs/api.md#elementfinderprototypeelement

Answer 2

The difference between ptor.findElement and element is that the first should be used pages without Angular while the second is used on pages with Angular. This is related to how protractor syncs with Angular. The first returns a WebDriver WebElement, the second returns a Protractor ElementFinder.

However to address your question directly, there is no difference between the locators returned by by.css and protractor.By.css. The two are equivalent. The object referenced by the global by object is the same as the the object referenced by protractor.By.

From Protractor's runner.js:

global.by = global.By = protractor.By;

There are two versions of the API. The old version used protractor.By, whereas the new version uses by. You may often see the old style but if you are in doubt, you can use the new style and be sure nothing unexpected will happen.