Question

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

通过评估JavaScript表达式来定位元素，该表达式可以是函数或字符串。

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

Answer 1

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

如果您使用核心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;
}));

如果你想使用颜色，字体等css值获取元素......虽然在这种情况下可以使用filter，但by.js也支持它。
如果 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或其他可以帮助定位元素的服务，则可能存在用例。

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

2 个答案: