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

Question

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

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

我了解此定位器提供的功能，但我错过了此定位器有用的真实世界用例。我什么时候应该更喜欢使用 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;
}));

1. 如果你想使用它的 css 值(如颜色、字体等)获取元素...虽然在这种情况下可以使用 filter，但是 by.js 也可以支持它。
2. 如果元素无法通过 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)');

希望对您有所帮助。