在webdriver.io中的while循环中链接诺言

Question

I want to take a screenshot of a full webpage by capturing tiles of the viewport size. It's almost done, but I'm very new to promises and I'm looking for the correct way to do.

Here is my code. The problem is the call to client.execute(...).then(...) does not wait for itself between loop iterations. And the final 'end' neither waits for the previous 'then', that's why it's commented out.

...
var client = webdriverio.remote(options);
...
client    
  ...
  .then(function() {

    var yTile = 0;
    var heightCaptured = 0;

    while(heightCaptured < documentSize.height) {
      var tileFile  = 'screenshot-' + yTile + '.png';

      client
      .execute(function(heightCaptured) {
        window.scrollTo(0, heightCaptured);
      }, heightCaptured)
      .then(function() {
        console.log('captured: ' + tileFile);
        client.saveScreenshot('./' + tileFile);

        return client;
      });

      heightCaptured += viewportSize.height;
      yTile++;
    }

  })
  //.client.end()
  ;

What is the correct way to use promises in this case?

Thanks.

Answer 1

You can't use a while look to chain an indeterminate number of async operations because the while loop will run to completion immediately, but you need the loop decisions to be made after each async execution.

Instead, you can create an internal function next() that returns a promise and call it repeatedly, chaining each to the previous until done and deciding within the loop whether to chain another call to next() by returning it inside a prior .then() handler or you can end the chain by just returning a regular value (not a promise).

...
var client = webdriverio.remote(options);
...
client
    ...
    .then(function () {
        var yTile = 0;
        var heightCaptured = 0;

        function next() {
            if (heightCaptured < documentSize.height) {
                var tileFile = 'screenshot-' + yTile + '.png';

                // return promise to chain it automatically to prior promise
                return client.execute(function (heightCaptured) {
                    window.scrollTo(0, heightCaptured);
                }, heightCaptured).then(function () {
                    console.log('captured: ' + tileFile);

                    // increment state variables
                    heightCaptured += viewportSize.height;
                    yTile++;

                    // return this promise to so it is also chained properly
                    // when this is done, call next again in the .then() handler
                    return client.saveScreenshot('./' + tileFile).then(next);
                });

            } else {
                // Done now, end the promise chain by returning a final value
                // Might also consider returning yTile so the caller knows
                // how many screen shots were saved
                return client;
            }
        }
        // start the loop
        return next();
    }).then(function () {
        // done here
    }, function (err) {
        // error here
    });

As a reference, if you are inside a .then() handler and you return a promise from the .then() handler, then that promise gets chained onto the previous promise. If you return a value instead, then the promise chain ends there and the value is returned as the final resolved value of the whole chain.

So, in this example, since next() returns a promise, you can repeatedly call return next(); from within the .then() handler and that will chain all your screenshots together into one sequential chain until you finally just return a value, not a promise and that will end the chain.