如何使用Angularjs在量角器中選擇可見元素

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

與角工作，這是很常見的有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 2

可以filter()出來：

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