0

In Protractor I have issues to retrieve the element corresponding to a button located in the Ionic1 header of my single-page app.

  • when I try to get it through element(by.id("toolButton")), I get a warning saying that there are several such objects, and that Protractor will take the first one. Then when I perform the click, I get an error saying that the element is not visible. With browser.wait(EC.visibilityOf(btn), 5000) I get a timeout. Digging in Chrome it appears that there are 2 instances of the page: one with <div class="nav-bar-block" nav-bar="active">, and another one with nav-bar="cached" instead of "active". So I guess Protractor catches the cached instance. (btw, I don't know why there is a cache version, my UI-router says cache:false for every state).

  • when I use Elementor to find a way to uniquely identify the button, it tells me log: "Cannot find suggestions".

Any idea to cope with this please?

Below you will find a screenshot of toolbar, and an extract of the HTML code showing the 2 instances of the toolbar. The button is the one marked '+'.

header toolbar screenshot

<ion-nav-bar class="bar-balanced ng-class:$root.backgroundClass nav-bar-container contact-background" nav-bar-transition="ios" nav-bar-direction="forward" nav-swipe="" style="">
  <ion-nav-back-button class="hide"></ion-nav-back-button>
  <ion-nav-buttons side="left" class="hide"></ion-nav-buttons>
  <ion-nav-buttons side="right" class="hide"></ion-nav-buttons>

  <div class="nav-bar-block" nav-bar="active">
    <ion-header-bar class="bar-balanced ng-class:$root.backgroundClass bar bar-header contact-background" align-title="center" style="">
      <button ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item"><i class="icon ion-ios-arrow-back"></i>          
        <span class="back-text" style="transform: translate3d(0px, 0px, 0px);"><span class="default-title hide">Back</span>
        <span class="previous-title">Accueil</span></span>
      </button>
      <div class="buttons buttons-left header-item"><span class="left-buttons">
        <button id="leftMenuBtn" class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button></span>
      </div>
      <div class="title title-center header-item" style="transform: translate3d(0px, 0px, 0px); left: 114px; right: 114px;"><span class="nav-bar-title">
        <i class="icon ion-person"></i> Contacts</span>
      </div>
      <div class="buttons buttons-right header-item"><span class="right-buttons">
        <button id="toolButton" class="button button-icon button-clear ng-class:$root.toolButtonIcon ion-plus" ng-click="$root.toolClick()" style=""></button>
        <button class="button button-icon button-clear ion-ios-film" menu-toggle="right" ng-disabled="$root.getLogin() == null"></button></span>
      </div>
    </ion-header-bar>
  </div>

  <div class="nav-bar-block" nav-bar="cached">
    <ion-header-bar class="bar-balanced ng-class:$root.backgroundClass bar bar-header contact-background" align-title="center" style="">
      <button ng-click="$ionicGoBack()" class="button back-button hide buttons  button-clear header-item" style="opacity: 0;"><i class="icon ion-ios-arrow-back"></i>          
        <span class="back-text" style="transform: translate3d(0px, 0px, 0px); opacity: 0;"><span class="default-title">Back</span>
        <span class="previous-title hide"></span></span>
      </button>
      <div class="buttons buttons-left header-item" style="opacity: 0;"><span class="left-buttons">
        <button id="leftMenuBtn" class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button></span>
      </div>
      <div class="title title-center header-item" style="left: 56px; right: 56px; transform: translate3d(-123.172px, 0px, 0px); opacity: 0;"><span class="nav-bar-title">
        <i class="icon ion-home"></i> Accueil</span>
      </div>
      <div class="buttons buttons-right header-item" style="opacity: 0;"><span class="right-buttons">
        <button id="toolButton" class="button button-icon button-clear ng-class:$root.toolButtonIcon ion-plus" ng-click="$root.toolClick()"></button>
        <button class="button button-icon button-clear ion-ios-film" menu-toggle="right" ng-disabled="$root.getLogin() == null"></button>
          </span></div></ion-header-bar></div></ion-nav-bar>
bfredo123
  • 462
  • 1
  • 8
  • 20
  • 1
    can you try something like this `element(by.css("[nav-bar='active'] button#toolButton"))` ? – Sudharsan Selvaraj Dec 16 '16 at 14:35
  • Many thanks. I have just tried, but get this: ` WebDriverError: unknown error: Element is not clickable at point (886, 21). Other element would receive the click: ` – bfredo123 Dec 16 '16 at 15:01
  • 1
    So the problem is that the film button is somehow overlapped with tools button i guess. You can try either clicking using `actions()` like `browser.actions().mouseMove(ele).click()` or use `executeScript()` like `browser.executeScript("arguments[0].click()",ele.getWebElement())`. – Sudharsan Selvaraj Dec 16 '16 at 15:06
  • thx, will try this... and first discover all those methods you are referring to! :-) – bfredo123 Dec 16 '16 at 15:08
  • 1
    @bfredo123 here is a collection of things to consider: http://stackoverflow.com/questions/37809915/element-not-visible-error-not-able-to-click-an-element/37815727#37815727 – alecxe Dec 16 '16 at 15:09
  • Many thanks you both, it's working now. The last error was due to my mistake, I was expecting the button to be present in the wrong page (so, I have now added some browser.wait statement to make sure the transition to next page happens before my test). – bfredo123 Dec 16 '16 at 15:25

0 Answers0