如何使用Angularjs在Protractor中选择可见元素 [英] How to select a visible element in Protractor with Angularjs

问题描述

我有一个SPA，其中有多个具有相同类的div。我想要量角器选择可见的div并单击它。我一直得到失败：元素不可见这使得相信它正在获得一些不在这个特定页面上的元素（也许？）。我也得到警告 - 找到多个定位器BycssSelector（'。myDiv'）的元素 - 第一个结果将被使用这再次让我觉得它没有点击可见的，但看不见的。

I have a SPA where there are multiple divs with the same class. I want protractor to select the visible div and click it. I keep getting the Failed: element not visible which makes be believe it's getting some element that isn't on this particular page (maybe?). I also get WARNING - more than one element found for locator By.cssSelector('.myDiv') - the first result will be used which again makes me think it's not clicking the visible one, but the invisible one.

这是我的规格：

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 并单击它？

How do I select the visible .myDiv and click it?

推荐答案

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

Working with angular, it is pretty common to have many layers of the same bit of html hidden, but earlier in the overall html page than the visible element you would like to work with.

对于一般调试，将你的网站打开到你期望量角器测试的位置到b e in，然后打开html并在html上搜索量角器测试所搜索的元素。请注意它是否可见以及它位于何处。

For general debugging, open up your site to the position you expect your protractor test to be in, then open the html and do a search on the html for the element your protractor test is searching for. Note if it is visible or not and where it is located overall.

考虑是否要为页面的不同区域添加标记，其中元素可以显示，然后使用父选择器和子选择器来获得你想要的那个。

Consider if you would like to add a tag for different areas of the page where the element can appear, and then use parent and child selectors to get the one you'd like.

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

You can also use this to select just the first visible element:

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

Pass in any element you'd like, it will take the locator and get the first visible version of it. You can also take off the .first() portion to return an array of the visible elements to work with.

编辑：

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

To use this, I will give a protractor+jasmine example. I thiiiink this should work given there is any number of desired elements on the page, with at least one being visible. This is off the top of my head though, so I may have made a mistake somewhere.

example_spec.js

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

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

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();
    };
};

这篇关于如何使用Angularjs在Protractor中选择可见元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！