Question

我有一个SPA，其中有多个具有相同类的div。我想要量角器选择可见的div并单击它。我一直得到Failed: element not visible，这让我相信它会在这个特定的页面上得到一些元素（也许？）。我也得到WARNING - more than one element found for locator By.cssSelector('.myDiv') - the first result will be used这再次让我觉得它没有点击可见的那个，而是看不见的那个。

这是我的规格：

describe('User actions', function () {
    it("should be able to click a my div.", function () {
    var myDiv = element(by.css('.myDiv'));
    myDiv.click();

    // some expect... haven't gotten this far yet.
});

如何选择可见.myDiv并点击它？

Answer 1

你可以filter()出来：

var myDiv = element.all(by.css('.myDiv')).filter(function (elm) {
    return elm.isDisplayed().then(function (isDisplayed) {
        return isDisplayed;
    });
}).first();

Answer 2

使用angular，隐藏html的相同位的许多层是很常见的，但在整个html页面中比你想要使用的可见元素更早。

对于一般调试，将您的网站打开到您希望量角器测试所在的位置，然后打开html并在html上搜索量角器测试所搜索的元素。请注意它是否可见以及整体位置。

考虑是否要为页面的不同区域添加标签，然后使用父选择器和子选择器来获取您喜欢的标签。

您也可以使用它来选择第一个可见元素：

// Takes a protractor webelement and returns the first displayed version
// Ex:
// var coolBox = $('.coolBox');
// var visibleCoolBox = getFirstVisibleProtractorElement(coolBox);
this.getFirstVisibleProtractorElement = function(selector){
    var allElementsOfSelector = element.all(by.css(selector.locator().value));
    return allElementsOfSelector.filter(function(elem) {
        return elem.isDisplayed().then(function(displayedElement){
             return displayedElement;
        });
    }).first();
};

传递您喜欢的任何元素，它将获取定位器并获得它的第一个可见版本。您还可以取下.first（）部分以返回要使用的可见元素数组。

修改：

为了使用它，我将给出一个量角器+茉莉花的例子。我认为这应该可行，因为页面上有任意数量的所需元素，至少有一个是可见的。这不是我的头脑，所以我可能在某个地方犯了错误。

example_spec.js

var examplePage = require('./example_page.js'); describe('Extracting visible elements', function(){ it('A visible element can be extracted', function(){ expect(examplePage.isACoolBoxVisible()).toBeTruthy('Error: No visible CoolBoxes'); }); });

example_page.js

var protractorUtils = require('./protractor_utils.js'); module.exports = new function(){ var elements = { coolBox: $('.coolBox') }; this.getVisibleCoolBox = function(){ return protractorUtils.getFirstVisibleProtractorElement(elements.coolBox); }; this.isACoolBoxVisible = function(){ return getVisibleCoolBox.isDisplayed(); }; };

protractor_utils.js

module.exports = new function(){ this.getFirstVisibleProtractorElement = function(selector){ var allElementsOfSelector = element.all(by.css(selector.locator().value)); return allElementsOfSelector.filter(function(elem) { return elem.isDisplayed().then(function(displayedElement){ return displayedElement; }); }).first(); }; };

Answer 3

我的答案中的逻辑和技术实际上是相同的，但是我发现我的解决方案更可重用。

定义如下功能

getFirstDisplayed(locator: Locator) {
  return element.all(locator).filter(x => x.isDisplayed()).first();
}

然后将您的语句转换为

element(by.css('img[title="Delete query rule"]')).click();

到

getFirstDisplayed(by.css('img[title="Delete query rule"]')).click();

这样，您将单击显示的第一个项目

如何使用Angularjs在Protractor中选择可见元素

3 个答案: