How do I get protractor to click my button? I keep getting an element is not visible

Question

I have the following markup, and I am trying to access the <button />

<ul class="flower-list">
  <li ng-repeat="flower in model.flowers">
    <img ng-src="flower.imgUrl">
    <button ng-click="model.addToFlowerPot(flower)">Add</button>
  </li>
</ul>

I have the following:

var flower = element.all(by.repeater('flower in model.flower')).first();
var addButton = flower.element(by.buttonText("Add"));
addButton.click();

check if there is a delay if the data is coming from service and wait until you get the data browser.waitForAngular(); that can be something that can cause issues — v0d1ch, Jul 24 '16 at 21:42

score 3 · Accepted Answer · answered Jul 25 '16 at 03:37

3

Check if there is a delay if the data is coming from service. You can wait until you get the data with

browser.waitForAngular()

answered Jul 25 '16 at 03:37

v0d1ch

2,738
1
22
27

Ram Pasala · Answer 2 · 2016-07-25T08:02:30.477

1

browser.waitForAngular() is not the ideal way of handling such cases. Protractor waits for angular event loop internally. Expected Conditions should be used in these scenarios.

 var EC = protractor.ExpectedConditions;
 var flower = element.all(by.repeater('flower in model.flower')).first();
 var addButton = flower.element(by.buttonText("Add"));
 browser.wait(EC.visibilityOf(addButton), 5000); //wait for the button to become visible in dom
 addButton.click();

or use promises directly which ever works :

  var flower = element.all(by.repeater('flower in model.flower')).first();
  flower.then(function() {
  return flower.element(by.buttonText("Add")).click();
  });

edited Jul 25 '16 at 08:02

answered Jul 25 '16 at 07:00

Ram Pasala

4,931
3
16
26

So whats faster? I think that would cause tests to run very slow if you are always waiting for few seconds here and there? – v0d1ch Jul 25 '16 at 07:29
Only for that specific element we are waiting rather than the whole page with `browser.waitForAngular` it would be much faster! – Ram Pasala Jul 25 '16 at 07:32
is there a way to not set the time limit but just wait for element to be visible ? seems like a hack to hardcode the number of seconds, for example I have a production server that is much faster than my local environment so wouldn't want to wait 5 seconds if I don't have to :) – v0d1ch Jul 25 '16 at 07:43
yes absolutely, in these cases we could write our own `expected conditions`. since these are promises we are talking about. we can use them, I update my answer pls check! you can also have a look at http://www.protractortest.org/#/api?view=ProtractorExpectedConditions – Ram Pasala Jul 25 '16 at 08:03
@vodich I agree with igniteram. Also it's important to note that the timeout from `browser.wait(EC.visibilityOf(addButton), 5000);` is the _maximum_ amount of time to wait, not a guaranteed amount of time to wait. So if the `addButton` element becomes visible in one second, it will fire off after one second instead of waiting for the declared five seconds. But if it's not visible within 5 seconds (or whatever time you specify), then it fails. – Gunderson Jul 25 '16 at 12:02
Expected conditions are a safe way of assuring test stability across multiple environments (elements taking longer to load in production vs locally etc) – Gunderson Jul 25 '16 at 12:03
1

ah I get it, didn't know that is max time but not waiting every time. Cool info , thanks! – v0d1ch Jul 25 '16 at 12:04
Are you sure the `flower.then` is needed in this case? Rather `element.all(by.repeater('flower in model.flower')).first().element(by.buttonText("Add")).click();`. Thanks. – alecxe Jul 25 '16 at 13:13
@alecxe its not needed in this case, but could be handy sometimes! – Ram Pasala Jul 25 '16 at 20:15

How do I get protractor to click my button? I keep getting an element is not visible

2 Answers2