How to identify the main nav-bar button while testing with Protractor


#1

Currently using the sidemenu template, two nav-bar divs are created, the cached and the active one:

<div class="nav-bar-block" nav-bar="cached">...
  <button id="mainMenu" class="button button-icon button-clear ion-navicon" menu-toggle="left">
....
<div class="nav-bar-block" nav-bar="active">...   
 <button id="mainMenu" class="button button-icon button-clear ion-navicon" menu-toggle="left">
....

Inside the 2 divs there are hamburguer button to activate the menu.
I want simutlate click on the hamburguer button, but, how can I select the active one if there is no differences between the two nav-bar divs?
Trying something like:

element(by.id('mainMenu'));

returns:

warning: more than one element found for locator By.id("mainMenu") - you may need to be more specific

I’ve also tested to use xpath to locate it:

element(by.xpath('/html/body/ion-nav-view/ion-side-menus/ion-side-menu-content/ion-nav-bar/div[2]/ion-header-bar/div[1]/span/button'))

and works for the first time click, but then the path changes to (div[2] > div[1] as the cached div becomes active) :

/html/body/ion-nav-view/ion-side-menus/ion-side-menu-content/ion-nav-bar/div[1]/ion-header-bar/div[1]/span/button

so the selector is not valid anymore.

Could be possible to add a class to the active nav-bar-block div, for example ‘active’, to be able to incorporate it to the xpath?


#2

Finally I’ve found a valid xpath:

by.xpath("//*[@nav-bar='active']//*//div//span//button")