使用Protractor选择导航菜单项

时间:2016-12-28 21:14:52

标签: protractor angularjs-e2e

我在启动某些菜单项时遇到了一些问题。 下面的菜单DOM包含<ul>个项目:

上传 报告 下载 管理员

这是菜单结构的DOM示例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

<div id="TheMenu">
<ul class="rmRootGroup rmHorizontal">
<li class="rmItem rmSelected" style="z-index: 0;">
<span class="rmLink rmRootLink rmExpand rmExpandDown" tabindex="0">Bal Sheet)</span><div class="rmSlide" style="display: none; visibility: visible; width: 141px; height: 126px; left: 0px; top: 28px; z-index: 9; overflow: hidden;">
    <ul class="rmVertical rmGroup rmLevel1" style="top: -126px; left: 0px; display: block; visibility: visible; transition: none;">
        <li class="rmItem rmFirst" style="z-index: 0;">
            <span class="rmLink rmExpand rmExpandRight" " style="width: 69px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Uploads</span></span><div class="rmSlide" style="display: none; visibility: visible; width: 144px; height: 126px; left: 135px; top: 0px; z-index: 5; overflow: hidden;">
                <ul class="rmVertical rmGroup rmLevel2">
                    <li class="rmItem rmFirst"><span class="rmLink" tabindex="0" ><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Upload List</span></span></li>
                    <li class="rmItem ">
                        <span class="rmLink rmExpand rmExpandRight" tabindex="0" ><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Adj123</span></span><div class="rmSlide">
                            <ul class="rmVertical rmGroup rmLevel3">
                                <li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">BLAH Adjustment This</span></span></li>
                                <li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">BLAH2 Adjustment That</span></span></li>
                            </ul>
                        </div>
                    </li>
                    <li class="rmItem ">
                        <span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 72px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Targets</span></span><div class="rmSlide">
                            <ul class="rmVertical rmGroup rmLevel3">
                                <li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Target1 BLAH1</span></span></li>
                                <li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Target2 BLAH2</span></span></li>
                            </ul>
                        </div>
                    </li>
                    <li class="rmItem rmLast">
                        <span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 72px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Actuals</span></span><div class="rmSlide">
                            <ul class="rmVertical rmGroup rmLevel3">
                                <li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Actual This</span></span></li>
                                <li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Actual That</span></span></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li class="rmItem ">
            <span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 69px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Reports</span></span><div class="rmSlide">
                <ul class="rmVertical rmGroup rmLevel2">
                    <li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">REPT 1</span></span></li>
                    <li class="rmItem "><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">REPT 2</span></span></li>
                    <li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">REPT 2</span></span></li>
                </ul>
            </div>
        </li>
        <li class="rmItem ">
            <span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 69px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Administration</span></span><div class="rmSlide">
                <ul class="rmVertical rmGroup rmLevel2">
                    <li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Sub123 List Admin</span></span></li>
                    <li class="rmItem "><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">THIS MENU</span></span></li>
                    <li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">THAT MENU</span></span></li>
                </ul>
            </div>
        </li>
        <li class="rmItem rmLast">
            <span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 69px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Downloads</span></span><div class="rmSlide">
                <ul class="rmVertical rmGroup rmLevel2">
                    <li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">FIRST DOWNLOAD THING</span></span></li>
                    <li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">SECOND DOWNLOAD THING</span></span></li>
                </ul>
            </div>
        </li>
    </ul>
</div>
</li>
</ul>
</div>

</body>
</html>

我的下载量角器脚本......

仅供参考:我的第一个elem.click()确实有效,并成功进入.Then()部分;并打开下拉菜单。

现在,我可以使用'.rmItem .rmFirst'打开“上传”子菜单,但是如果我想打开“报告”菜单怎么办?我应该使用哪个选择器? 'ul li:nth-child(2)'只会再次回到顶级菜单栏中的兄弟姐妹(不是我想要的)。

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

非常感谢帮助。

的问候, 鲍勃

2 个答案:

答案 0 :(得分:1)

您想使用first()方法从数组中获取第一个元素。但是element()返回单个元素,你应该使用element.all()返回ElementArrayFinder然后你可以应用first()。

我不想使用cssContaingText,而是希望在菜单中创建一些关卡结构,然后只是走进每个关卡。

另外,你为什么决定waitForAngular? Proractor默认等待,我不明白为什么你在这种情况下使用browser.sleep。大多数事情你可以通过chaning然后承诺来实现。

您能指定您想要点击哪个元素吗?

编辑:

另外,rmLink类没有这样的元素并且包含文本调整这个,我认为你应该寻找rmText。

答案 1 :(得分:1)

由于我们在这种环境中遇到了遍历DOM的路障,我们决定采用browser.actions()和&#39; cssByText()`的组合。

它并不理想,但确实有效。

例如,这将完成获取所需Angular页面所需的菜单点击(fyi:导航菜单不是Angular应用程序;只有最终着陆页是Angular应用程序在{{1}内加载的位置元素)。

&#13;
&#13;
iframe
&#13;
&#13;
&#13;