使用量角器 select 导航菜单项

Question

我在启动某些菜单项时遇到了一些问题。下面的菜单 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'打开"Uploads"子菜单，但是如果我想打开“Reports”菜单怎么办？我应该使用哪个选择器？ '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();
  });
}

感谢帮助。

此致，鲍勃

Answer 1

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

与其使用 cssContaingText，我更愿意在您的菜单中创建一些层次结构，然后在每个层次中行走。

另外，你为什么决定 waitForAngular ？量角器默认等待，我不明白你为什么在那种情况下使用 browser.sleep。大多数事情你可以通过改变承诺来实现。

你能具体说明你想点击哪个元素吗？

编辑：

此外，没有带有 rmLink class 且包含文本的此类元素 Adjust This，我认为您应该寻找 rmText。

Answer 2

由于我们在这种环境中遇到了很多穿越 DOM 的路障，我们决定结合使用 browser.actions() 和“cssByText()”。

这并不理想，但确实有效。

例如，这将完成进入所需 Angular 页面所需的菜单点击（仅供参考：导航菜单不是 Angular 应用程序；只有最终登陆页面是Angular 应用在 iframe 元素中加载）。

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

});
}

使用量角器 select 导航菜单项

Using Protractor to select nav menu items

angularjs-e2e

protractor