Using Protractor to select nav menu items

Question

I'm some issues launching certain menu items. The menu DOM below contains

Uploads Reports Downloads Admin

Here's a DOM sample of the menu structure:











Bal Sheet)
    
        
            Uploads
                
                    Upload List
                    
                        Adj123
                            
                                BLAH Adjustment This
                                BLAH2 Adjustment That
                            
                        
                    
                    
                        Targets
                            
                                Target1 BLAH1
                                Target2 BLAH2
                            
                        
                    
                    
                        Actuals
                            
                                Actual This
                                Actual That
                            
                        
                    
                
            
        
        
            Reports
                
                    REPT 1
                    REPT 2
                    REPT 2
                
            
        
        
            Administration
                
                    Sub123 List Admin
                    THIS MENU
                    THAT MENU
                
            
        
        
            Downloads
                
                    FIRST DOWNLOAD THING
                    SECOND DOWNLOAD THING

And my Protractor script below...

FYI: My first elem.click() does work, and successfully enters the .Then() section; and the dropdown menu opens.

Now, I can use '.rmItem .rmFirst' to open the "Uploads" sub menu, but what if I want to open the "Reports" menu ? Which selector should I use ? 'ul li:nth-child(2)' only goes to the siblings which goes back to the top menu bar again (not what I want).

this.launchUploadsMenu = function () {
  var sel = '#RadMenu1 > ul > li:nth-child(3)';
  var elem = element(by.css(sel));

  elem.click().then(function () {
    //var elem2 = element.all(by.cssContainingText('.rmLink', 'Uploads')).first();	// THIS STILL NOT WORKING
    
    var elem2 = element.all(by.css('.rmItem .rmFirst'));   // 
    elem2.click();
  });
}

Help is appreciated.

regards, Bob

bob.mazzo · Accepted Answer

Due to the fact that we have encountered so many road blocks traversing the DOM in this environment, we decided to go with a combination of browser.actions() and 'cssByText()` instead.

It's not ideal, but it does work.

For example, this will accomplish the menu clicks that are required to get to the required Angular page (fyi: the nav menus are NOT an Angular application; only the final landing page is where the Angular app loads within an iframe element).

var sel = '#RadMenu1 > ul > li:nth-child(3)'; // top-level menu       

var elem = element(by.css(sel));

elem.click().then(function () {    

    var elem2 = element(by.css(sel));
    browser.sleep(2000);        

    // OPENS SUBMENUS
    browser.actions()
	.mouseMove(elem2, { x: 25, y: 50 }) // an offset relative to the top-left corner of elem2
	.click()
	.perform()
	    .then(function () {
		browser.sleep(1000);
		browser.actions()
		    .mouseMove({ x: 150, y: 20 })   // opens next menu option
		    .click()
		    .perform()
			.then(function () {
			    var elem = element(by.cssContainingText('.rmText', 'Menu Item To Click'));   		
            		    elem.click();  
			});
	    });
    

});
}

Using Protractor to select nav menu items

Answers (2)

Related Questions