When working with Angular, it is common to have multiple layers of hidden HTML elements within the overall structure of the page. Sometimes, you may need to access a specific visible element that is buried under these layers.
For debugging purposes, one approach is to open your site and inspect the HTML to locate the element that your Protractor test is targeting. You can determine if it is visible and its position within the DOM hierarchy.
If needed, consider adding unique tags to different areas where the element might appear and use parent-child selectors to pinpoint the desired element.
You can also implement a function to select only the first visible element:
// Function to retrieve the first displayed element
// Example:
// 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();
};
Simply pass in any element for the function to extract the first visible version of it. If necessary, you can remove the .first() method to obtain an array of visible elements to work with.
NOTE: Please note that the following example assumes there are multiple elements on the page, with at least one being visible. It uses Protractor with Jasmine for demonstration.
example_spec.js
var examplePage = require('./example_page.js');
describe('Extracting visible elements', function(){
it('Should extract a visible element successfully', 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();
};
};