CODEWITHSUNDEEP
protractorangularjs-e2e
bob.mazzo
bob.mazzo

Reputation: 5627

Struggling with Protractor menu clicks

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

Upvotes: 1

Views: 255

Answers (1)

alecxe
alecxe

Reputation: 473833

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:

Upvotes: 3

Related Questions