Simplify nesting promises in protractor

Question

I have a canvas with unknown dimensions and position. I want to simulate clicking onto specific coordinates based on the dimensions and position of the canvas in protractor.

The following works, but is rather tedious:

 var canvas = element(by.id("canvas")); 

 canvas.getCssValue("left").then(function (left) {

            canvas.getCssValue("top").then(function (top) {

                canvas.getCssValue("width").then(function(oldWidth) {

                        canvas.getCssValue("height").then(function (oldHeight) {

                        // some code that uses left, top, oldWidth and oldHeight together

                                })
                            })

                        })
                    }
                )
            })
        })

Is there a more elegant way to use all these promises at once? I would really like to do something like the following:

var width = canvas.getCssValue("width");
var height = canvas.getCssValue("height");

var left = canvas.getCssValue("left");
var top = canvas.getCssValue("top");

//code that uses these variables.

But of course if defies the nature of promises. Thanks for your help.

Just curious why retrieving a css value is an asynchronous operation? — jfriend00, Feb 10 '15 at 22:15
@Esailija - so is the operation remote? Is that why it's async? — jfriend00, Feb 10 '15 at 22:30
@jfriend00 yeah: "Protractor is an end-to-end test framework for AngularJS applications. Protractor is a Node.js program built on top of WebDriverJS. Protractor runs tests against your application running in a real browser, interacting with it as a user would." https://github.com/angular/protractor — Esailija, Feb 10 '15 at 22:36
@jfriend00 I'm not very familiar with asynchronous programming and as far as I know, synchronous testing would make it a lot easier. — Bowzer2, Feb 10 '15 at 22:49

score 5 · Accepted Answer · answered Feb 10 '15 at 22:15

5

function spreader(fn) {
    return function(arr) {
        return fn.apply(this, arr);
    }
}

var width = canvas.getCssValue("width");
var height = canvas.getCssValue("height");

var left = canvas.getCssValue("left");
var top = canvas.getCssValue("top");

protractor.promise.all(width, height, left, top)
    .then(spreader(function(width, height, left, top) {
    // Use width, height, left, top as values
}));

answered Feb 10 '15 at 22:15

Esailija

138,174
23
272
326

1

Could you add some explanation about how this works and/or add links to the related protractor docs? – alecxe Feb 10 '15 at 23:34

score 0 · Answer 2 · answered Feb 10 '15 at 21:54

Maybe you could use something linke Q.all.

https://github.com/kriskowal/q#combination

e.g.

Q.all([
         canvas.getCssValue("width"),
         canvas.getCssValue("height"),
         canvas.getCssValue("left")
         canvas.getCssValue("top")
      ])
    .then(function(width,height,left,top){
      // ...
     });

Simplify nesting promises in protractor

2 Answers2