Использование транспортера для выбора пунктов меню навигации

У меня некоторые проблемы с запуском определенных пунктов меню. 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>

И мой Скрипт проталкивателя ниже. ..

FYI: Мой первый 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(); \t // THIS STILL NOT WORKING 
 
    
 
    var elem2 = element.all(by.css('.rmItem .rmFirst')); // 
 
    elem2.click(); 
 
    }); 
 
}

Помощь ценится.

С уважением, Боб

источник

2016-12-28 bob.mazzo

В связи с тем, что мы столкнулись с таким количеством дорожных блоков, пересекающих DOM в этой среде, мы решили пойти с комбинацией browser.actions() и 'cssByText() `вместо этого.

Это не идеальный вариант, но он действительно работает.

Например, это приведет к щелчкам меню, которые необходимы для перехода на требуемую Угловую страницу (fyi: меню навигации НЕ является угловым приложением; только конечная целевая страница - это место, где приложение 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() 
 
\t .mouseMove(elem2, { x: 25, y: 50 }) // an offset relative to the top-left corner of elem2 
 
\t .click() 
 
\t .perform() 
 
\t  .then(function() { 
 
\t \t browser.sleep(1000); 
 
\t \t browser.actions() 
 
\t \t  .mouseMove({ x: 150, y: 20 }) // opens next menu option 
 
\t \t  .click() 
 
\t \t  .perform() 
 
\t \t \t .then(function() { 
 
\t \t \t  var elem = element(by.cssContainingText('.rmText', 'Menu Item To Click')); \t \t 
 
      \t \t  elem.click(); 
 
\t \t \t }); 
 
\t  }); 
 
    
 

 
}); 
 
}

источник

2017-01-03 14:54:14

Вы хотите использовать метод первый(), чтобы получить первый элемент из массива. Но element() возвращает один элемент, вы должны использовать element.all() для возврата ElementArrayFinder, а затем вы можете применить first().

Вместо использования cssContaingText я бы предпочел создать некоторую структуру уровней в вашем меню, а затем просто ходить внутри каждого уровня.

Кроме того, почему вы решили ждатьForAngular? Транспортир ждет по умолчанию, я не понимаю, почему вы используете browser.sleep в этом случае. Большинство вещей, которые вы можете достичь, чиня, а затем обещания.

Можете ли вы указать, на каком элементе именно вы хотите нажать?

EDIT:

Кроме того, нет такого элемента с классом rmLink и содержащих текст Adjust Это, я думаю, что вы должны искать rmText.

источник

2016-12-28 21:59:53

Я не говорил об изменении структуры в HTML, но и о создании эквивалента в вашем транспортир кода/pageObject. –

var levels = element.all (by.css ('. RmLevel1> .rmItem')); var levelOne = levels.get (0); levelOne.element (by.css ('. RmExpand> .rmText'). Click() // будет Материалы –

см. Мой пересмотренный пост. –

Использование транспортера для выбора пунктов меню навигации

ответ

Смежные вопросы