Struggling with Protractor menu clicks

Question

So my Protractor select looks like this:

element(by.css('#TheMenu > ul > li.rmItem.rmFirst > span')).getText().then(function(txt){
        console.log('**** WE HAVE THE MENU !!!! ****');
    });

and the DOM structure looks like :

<div id="TheMenu">
<ul class="rmRootGroup rmHorizontal">
    <li class="rmItem rmFirst" style="z-index: 0;">
        <span class="rmLink rmRootLink rmExpand rmExpandDown" tabindex="0">My Reports</span><div class="rmSlide">
            <ul class="rmVertical rmGroup rmLevel1">
                <li class="rmItem rmFirst">
                    <span class="rmLink rmExpand rmExpandRight" tabindex="0">
                        <span class="rmText">FIRST DROPDOWN MENU</span>
                    </span><div class="rmSlide">
                        <ul class="rmVertical rmGroup rmLevel2">
                            <li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><span class="rmText">FIRST MENU ITEM</span></span></li>
                            <li class="rmItem rmLast"><span class="rmLink" tabindex="0"><span class="rmText">SECOND MENU ITEM</span></span></li>
                        </ul>
                    </div>
                </li>
                <li class="rmItem ">
                    <span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 105px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">SECOND DROPDOWN MENU</span></span><div class="rmSlide">
                        <ul class="rmVertical rmGroup rmLevel2">
                            <li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><span class="rmText"> FIRST ITEM OF SECOND </span></span></li>
                        </ul>
                    </div>
                </li>
                <li class="rmItem rmLast">
                    <span class="rmLink" tabindex="0" style="width: 105px;">
                        <span class="rmText">LAST MENU ITEM</span>
                    </span>
                </li>
            </ul>
        </div>
    </li>
</ul>
</div>

and I'm using Protractor to try and click in this order :

1) My Reports

2) FIRST DROPDOWN MENU

3) FIRST MENU ITEM

However, I'm getting a cmd prompt error when running the Protract test:

    Stack:
NoSuchElementError: No element found using locator: By(css selector,   #TheMenu > ul > li.rmItem.rmFirst > span)

Using Chrome console tools, using this jquery selector below :

 $('#TheMenu > ul > li.rmItem.rmFirst > span')[0]

does return this:

My Reports

So I'm running into an issue with the correct Protractor selection. element.all() is also giving me an issue. Not sure why.

Help is appreciated...

Bob

---- UPDATE ----

For the benefit of someone using Protractor, clicking menus, and dealing with multiple browser windows, etc.

NB: I still not crazy about how I'm handing getAllWindowHandles().then. I'm thining of doing a handles.forEach() to properly read thru them...

var submitElement = element(by.id('bthLogin'));
    
    submitElement.click().then(function () {
        browser.sleep(200);
        browser.waitForAngular();
        console.log("Login sucessfully");        
        browser.waitForAngular();

        //browser.wait(EC.presenceOf(elem), 2000);  // still testing this line...

        browser.getAllWindowHandles().then(function (handles) {
            console.log('---->Win 0: ' + handles[0]); 
            console.log('---->Win 1: ' +  handles[1]);                                       
            
            browser.driver.getCurrentUrl().then(function(curr){
                console.log('CURR URL: ' + curr);
                if (curr.indexOf('LoginMsg.aspx') >= 0){
                    // close the login successful browser window !!
                    browser.driver.close();
                }
            });
            
            browser.driver.switchTo().window(handles[1]);
            browser.driver.getCurrentUrl().then(function(curr){
                if (curr.indexOf('Default.aspx') >= 0){
   console.log('THIS IS OUR MAIN APPLICATION WINDOW !!!');                    
                }   
            });                        
        });
        
        var sel = '#TheMenu > ul > li:first-child';

        elem = element(by.css(sel));
        elem.click().then(function(){

        });

        browser.pause();                       
    });

score 3 · Accepted Answer · edited May 23 '17 at 12:00

3

Here is a guess - this is a timing issue and you just need to wait for the visibility of the element:

var EC = protractor.ExpectedConditions;
var elm = $('#TheMenu > ul > li.rmItem.rmFirst > span');

browser.wait(EC.visibilityOf(elm), 5000);
elm.getText().then(console.log);

Also, a relevant link that would help to close the extra window you've got:

https://stackoverflow.com/a/29505926/771848

edited May 23 '17 at 12:00

Community

1
1

answered Nov 10 '16 at 17:10

alecxe

462,703
120
1,088
1,195

I'm getting `Wait timed out after 5000ms', but I think it it related to this other browser window that the "successful" login event pops up in the background. So I get the main application with all the menus, etc., plus a stupid browser window that also launches which verifies you have logged in properly. Yes, weird. – bob.mazzo Nov 10 '16 at 17:28
1

@bob.mazzo thanks! Ah, let's try closing that window, try applying this solution: http://stackoverflow.com/a/29505926/771848. Please make sure you've got 2 window handles. – alecxe Nov 10 '16 at 17:30
1

it looks like that solution has great potential. I'll work on it and post back ASAP. Many thanks, Alex ! – bob.mazzo Nov 10 '16 at 17:40
could you add that link `http://stackoverflow.com/questions/29502255/is-there-a-way-to-close-a-tab-in-webdriver-or-protractor/29505926#29505926` also to your original answer ? Very helpful. – bob.mazzo Nov 10 '16 at 22:40
the `EC.presenceOf()` does not work. I keep getting `ElementNotVisibleError: element not visible`, unless I put a browser.sleep(1000). That solves it. Weird. – bob.mazzo Nov 10 '16 at 23:44
@bob.mazzo okay, included the link to the answer. Regarding the last problem you have - try with `visibilityOf` instead of `presenceOf`. Thanks. – alecxe Nov 11 '16 at 02:42
thanks for including. Just a note that neither visibilityOf/presenceOf works in my environment. Could be because there's some quirky `` which is part of the Telerik RAD menu system that's used to launch any web app desired. The app loads within the iframe, and the original RAD menu systems remains at the top. – bob.mazzo Nov 14 '16 at 16:28

Struggling with Protractor menu clicks

1 Answers1