Protractor wait for event

Question

During an it... will do something.... function test on an angular coded website, I have a counter field, that increments when a given job completes its background task.

How can i get protractor to wait till the counter goes from 0 to 1?

I have tried browser.wait, onprepare and isdisplayed but the time varies on the job to complete.

Basically, I want the test to do the following: login to site follow some button clicks to submit a job verify counter is 0 and when job is complete, wait for counter to be 1 Then continue other test actions

Thanks

Your question is not clear. Can you provide the code snippet? Please read minimal reproducible example — Gaurav
it('run job and notify', function() { (read counter value) element(by.className('loadpage')).click(); element. click some buttons browser.wait(until counter increments) then do some other stuff }); }); class="alertCounter ng-binding">10</em> — 1822nikki
One thing I want to say: Always remember that the browser.wait is not a blocking call. You do have to write your own function that performs the necessary checks. For more info read protractortest.org/#/… — Gaurav
counter value is from the class in the code. It is always set to 0 visually when you login, <em class = "counter"> 0></em> — 1822nikki

Gaurav Gaurav · Accepted Answer · 2017-03-07T16:10:36

You can write your own custom function that will verify the counter value. This custom function could be passed to browser.wait function.

Assuming following are the files:

HTML file

<html ng-app="myApp" ng-controller="MainController">

<head>
  <title>{{title}}</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="src/app.js"></script>
</head>

<body>

  <div ng-controller="MyController">

    <div class="main">{{data}}</div>

    <div class="counter">{{counterVal}}</div>

    <button class="counter-btn" ng-click="increaseCounter()">Increase Counter</button>

  </div>
</body>

</html>

JS(Angular) file

angular.module('myApp', [])
  .controller('MainController', MainController)
  .controller('MyController', MyController);

function MainController($scope) {
  $scope.title = 'Protractor test';
}

function MyController($scope, $timeout) {

  $scope.data = 'Hi!';
  $scope.counterVal = 0;

  $scope.increaseCounter = function () {

    // Async call, can be a network call.
    $timeout(function () {
      $scope.counterVal++;
    }, 1000);
  }

}

Protractor test file

describe('localhost test page', function () {

  it('should open webpage', function () {

    browser.get('http://localhost/angularjs/index.html');

    expect(element(by.css('.main')).getText()).toEqual('Hi!');
    expect(element(by.css('.counter')).getText()).toEqual('0');

    // Click the button.
    element(by.css('.counter-btn')).click();

    browser.wait(waitForCounterIncrease('1'));

    // Click again
    element(by.css('.counter-btn')).click();

    browser.wait(waitForCounterIncrease('2'));

  });

  // This is the custom funtion.
  // Note: If condition is not met, this function will timeout based on the settings.
  function waitForCounterIncrease(val) {

    return function () {
      var deferred = protractor.promise.defer();
      element(by.css('.counter')).getText()
        .then(function (counterVal) {
          console.log(counterVal)
          if (counterVal === val) {
            deferred.fulfill(counterVal);
          }
        });
      return deferred.promise;
    }
  }

});

If you run the above test, it should pass verifying the counter values.

Protractor wait for event

2 Answers