Recently, I've noticed a new locator being added to the Protractor documentation - the by.js():

Locates an elements by evaluating a JavaScript expression, which may be either a function or a string.

I understand what this locator provides, but I am missing the real-world use cases when this locator can be useful. When should I prefer to use by.js instead of other built-in locators like by.css?

Recently, I've noticed a new locator being added to the Protractor documentation - the by.js():

Locates an elements by evaluating a JavaScript expression, which may be either a function or a string.

I understand what this locator provides, but I am missing the real-world use cases when this locator can be useful. When should I prefer to use by.js instead of other built-in locators like by.css?

• javascript
• selenium
• testing
• selenium-webdriver
• protractor

Share Improve this question Follow edited Jun 8, 2016 at 3:13 alecxe asked Apr 26, 2016 at 15:47 alecxealecxe 474k127127 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 13 +50

I feel the use case is to get elements using core javascript functions, whenever css and other element locators won't help or are don't have properties that we could use. Scenarios -

1. If you are getting an element using core javascript functions passing it to browser.executeScript then by.js can be used to replace it.

Example: -

Suppose if you had to get an element that appears on top between the two, you could get it this way -

var ele = element(by.js(function(){
    var ele1 = document.getElementById('#ele1');
    var ele2 = document.getElementById('#ele2');
    var val = ele1.pareDocumentPosition(ele2);
    if(val === 4) return ele1;
    else return ele2;
}));

2. If you want to get element using its css values like color, font, etc... Though filter can be used in this case, but by.js also supports it.
3. If the elements are not accessible by css or xpath or any other locators, for example pseudo-elements that have animations or transitions.

Example: -

Suppose if there's element which has :before and :after transitions -

.element:before {
    color: rgb(255, 0, 0);
}

To verify the color of the element, we could use by.js passing in a javascript statement to get the element -

var ele = element(by.js(function(){
    return window.getComputedStyle(document.querySelector('.element'), ':before');
}));
expect(ele.getCssValue('color')).toEqual('rgb(255, 0, 0)');

Hope it helps.

I think the cases for this are pretty slim, but I can see this being of use when there's data on the client that is not available (or unreliably so) through selenium.

The example on the docs page includes a reference to offsetWidth:

spans[i].offsetWidth > 100

Used in context:

var wideElement = element(by.js(function() {
  var spans = document.querySelectorAll('span');
  for (var i = 0; i < spans.length; ++i) {
    if (spans[i].offsetWidth > 100) {
     return spans[i];
    }
  }
}));
expect(wideElement.getText()).toEqual('Three');

Alternatively, there may be a use case if there's a third party API on the window or some other service that can help locate an element.