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

【问题标题】：What is by.js locator for in Protractor/WebDriverJS?Protractor/WebDriverJS 中的 by.js 定位器是什么？
【发布时间】：2016-08-20 13:41:09
【问题描述】：

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

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

我了解此定位器提供的功能，但是当此定位器有用时，我错过了真实世界的用例。我什么时候应该更喜欢使用by.js 而不是其他内置定位器，如by.css？

【问题讨论】：

标签： javascript selenium testing selenium-webdriver protractor

【解决方案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 或任何其他定位器访问，例如具有动画或过渡的 pseudo-elements。

示例： -

假设是否存在具有: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)');

希望对你有帮助。

【讨论】：

有趣的用例，现在我可以想象我可以在哪里使用by.js。谢谢！

【解决方案2】：

我认为这种情况非常少，但是当客户端上的数据通过 selenium 不可用（或不可靠）时，我可以看到这很有用。

文档页面上的示例包含对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 或其他可以帮助定位元素的服务，则可能会有用例。

【讨论】：