与量角器菜单点击作斗争

Question

所以我的量角器 select 看起来像这样：

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

和 DOM 结构如下：

<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>

我正在使用 Protractor 尝试按此顺序点击：

1) 我的报告

2) 第一个下拉菜单

3) 第一个菜单项

但是，当运行 Protract 测试时，我收到 cmd 提示错误：

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

使用 Chrome 控制台工具，使用此 jquery select 或以下：

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

做return这个：

我的报告

所以我运行遇到了正确量角器 selection 的问题。 element.all() 也给我一个问题。不知道为什么。

感谢帮助...

鲍勃

----更新----

为了使用 Protractor、单击菜单和处理多个浏览器 windows 等的人的利益

注意：我仍然对我的处理方式不满意 getAllWindowHandles().then。我想做一个 handles.forEach() 来正确阅读它们...

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

Answer 1

这是一个猜测 - 这是一个时间问题，您只需要等待 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);

另外，一个相关的 link 将有助于关闭额外的 window 你有：

与量角器菜单点击作斗争

Struggling with Protractor menu clicks

angularjs-e2e

protractor