Protractor: How to wait for executeAsyncScript to finish?

Question

I have the following function with executeAsyncScript :

this.playVideoAtIndex = function(index) {
    return browser.executeAsyncScript((index) => {
        let video = document.querySelectorAll('#video');
            video.oncanplay = () => {
                video.play();
            };
    }, index);
}

I want to run something only after it finished, but it doesn't seem to return a promise that resolves after the script was excuted.

Answer 1

You need to add callback as your last argument, and call it:

this.playVideoAtIndex = function(index) {
    return browser.executeAsyncScript((index, callback) => {
        let video = document.querySelectorAll('#video');
            video.oncanplay = () => {
                video.play();
                callback();
            };
    }, index);
}

Answer 2

You need to wrap your function into Protractor's control flow , so it's executed in the main Protractor asynchronous queue:

this.playVideoAtIndex = function(index) {
  return browser.controlFlow().execute(function() {
    browser.executeAsyncScript((index) => {
      let video = document.querySelectorAll('#video');
        video.oncanplay = () => {
            video.play();
        };
      }, index);
  });
};