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

Question

我有一个SPA，其中有多个具有相同类的div。我希望量角器选择可见的div并单击它。我一直得到失败：元素不可见，这让人相信它得到了一些不在这个特定页面上的元素（也许？）。我还得到警告-为定位器By.cssSelector（'. myDiv'）找到了多个元素-第一个结果将被使用，这再次让我认为它不是单击可见的，而是不可见的。

这是我的规格：

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

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

定义如下函数

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

然后只需转换您的语句，例如

元素（by.css（'img[title="删除查询规则"]'））. Click（）；

到

getFirstDisplayed（by.css（'img[title=“Delete query rule”]'））.click（）

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

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（） 部分以返回要使用的可见元素的数组。

编辑：

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

示例规范.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

您可以过滤（）它：

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