1

I've got an ionic app, with an ionic-list with onionic-option-button. This button becomes visible when a user swipes to the left. I want to write a protractor (Chromedriver & Android & Appium & Protractor tests) test to swipe to the left, and click the button. The swipe is no problem, I can see the button becomes visible, but the click is not registered. The ion-option-button has an ng-click event that does trigger the event. I've tried:

  • Get the ion-option-button element and click it
  • Tried using tap instead
  • Tried to tap on the location, calculated by grabbing the ion-item (that contains the ion-option-button) and calculating where the ion-button-button is
  • Using tapAndHold, wait, and release
  • Used browser.driver.touchActions().tap(element)

I don't get any errors that the element is not clickable. The event is just not registered; so it looks like the ion-option-button listens to another event?

It works with Javascript: 

browser.driver.executeScript('angular.element(document.getElementById("delete-button-0")).triggerHandler("click");');
Boland
  • 1,531
  • 1
  • 14
  • 42
  • `browser.driver.touchActions().tap(element)` - did you call `perform()` at the end? – alecxe Feb 04 '16 at 19:52
  • Yes, thanks. Verified that, I do a perform(). – Boland Feb 04 '16 at 19:56
  • Just to check on the last statement, if you click via javascript (`executeScript`) - it works and the element is getting clicked - right? – alecxe Feb 04 '16 at 20:01
  • @alecxe I did not test that yet, but I just did. And yes, that is working: browser.driver.executeScript('angular.element(document.getElementById("delete-button-0")).triggerHandler("click");'); – Boland Feb 04 '16 at 20:22

1 Answers1

4

After you make the swipe to the left action, try waiting for the element to be clickable:

var EC = protractor.ExpectedConditions;
var elm = element(by.id("delete-bu‌​tton-0"));

browser.wait(EC.elementToBeClickable(elm), 5000);
elm.click();  
// or browser.actions().touchActions().tap(elm).perform();

Or, you may need to move to the element and then click (or tap):

browser.actions().mouseMove(elm).click().perform();

You can also try scrolling into element's view before making a click/tap:

browser.executeScript("arguments[0].scrollIntoView();", elm.getWebElement());

And, only as a last resort and if everything else is not working, click it via javascript:

browser.executeScript("arguments[0].click();", elm.getWebElement());

There are drawbacks to this solution, make sure you understand the difference:

Community
  • 1
  • 1
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • Thank you!! waiting for it to be clickable solved the issue. Makes sense too. – Boland Feb 04 '16 at 21:09
  • why use .perform() – Daniel Jan 09 '18 at 18:34
  • only the browser method works for my ionic-tab-button . I have no idea why the element is not clickable it seems, any hints? this works : await browser.executeScript(` const btn = document.getElementById('tab-button-switchRole'); btn.click();`); This does not : const wissel_button = element(by.id('tab-button-switchRole')); wissel_button.click() . I would love to know how to fix it, because I want to be sure my test actually tests the user being able to click. – Vincent Gerris Jul 30 '22 at 22:15