什么是Protractor/WebDriverJS中的by.js定位器？

Question

最近,我注意到了一个新的定位器被添加到Protractor文档中 - by.js():

通过计算JavaScript表达式来定位元素,该表达式可以是函数或字符串.

我理解这个定位器提供了什么,但是当这个定位器很有用时,我错过了真实的用例.我应该何时使用by.js而不是使用其他内置定位器by.css？

Answer 1

我觉得用例是使用核心javascript函数获取元素,只要css其他元素定位器无法帮助或者没有我们可以使用的属性.场景 -

1. 如果你正在使用核心javascript函数获取元素,browser.executeScript那么by.js可以用它来替换它.

示例: -

假设你必须得到一个出现在两者之间的元素,你可以这样做 -

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

2. 如果你想使用颜色,字体等css​​值获取元素......虽然filter可以在这种情况下使用,但by.js也支持它.
3. 如果css或xpath或任何其他定位器无法访问这些元素,例如具有动画或过渡的伪元素.

示例: -

假设有元素有:before和:after转换 -

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

要验证元素的颜色,我们可以使用by.js传入javascript语句来获取元素 -

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

希望能帮助到你.

Answer 2

我认为这种情况非常渺茫,但是当客户端的数据通过硒不可用(或不可靠)时,我可以看到这种情况有用.

文档页面上的示例包括对以下内容的引用offsetWidth:

spans[i].offsetWidth > 100

用于上下文:

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');

或者,如果窗口上有第三方API或可以帮助定位元素的其他服务,则可能存在用例.