Using a while loop to chain promises in webdriver.io

Question

Using a while loop to chain promises in webdriver.io

I am trying to capture a full webpage screenshot by taking tiles of the viewport size. I have almost completed this task, but I am relatively new to promises and need guidance on the correct approach.

Below is my code. The issue I am facing is that the call to client.execute(...) doesn't wait for itself between loop iterations. Additionally, the final 'end' statement does not wait for the previous 'then', which is why it's currently 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()
  ;

Could someone provide me with the correct way to utilize promises in this scenario?

Thank you.

javascript selenium promise es6-promise webdriver-io

Answer 1

Answer №1

To efficiently chain an indeterminate number of async operations, avoid using a while loop as it will run to completion immediately. Instead, create an internal function called next() that returns a promise. Call this function repeatedly, chaining each call to the previous one until all async operations are complete. Decide within the loop whether to continue chaining by returning next() inside a prior .then() handler or end the chain by returning a regular value.

...
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 automatically
                return client.execute(function (heightCaptured) {
                    window.scrollTo(0, heightCaptured);
                }, heightCaptured).then(function () {
                    console.log('captured: ' + tileFile);

                    heightCaptured += viewportSize.height;
                    yTile++;

                    // chain promises properly
                    return client.saveScreenshot('./' + tileFile).then(next);
                });

            } else {
                // End the promise chain
                return client;
            }
        }

        return next();
    }).then(function () {
        // done here
    }, function (err) {
        // error here
    });

When inside a .then() handler, returning a promise chains it to the previous promise. Returning a value ends the chain there. In this example, returning a promise from next() allows for sequential chaining until a regular value is returned to end the chain.

Hence, calling return next(); repeatedly from within the .then() handler links all screenshots in a sequential order until reaching the final value that signals the end of the chain.

Answer 2

To efficiently chain an indeterminate number of async operations, avoid using a while loop as it will run to completion immediately. Instead, create an internal function called next() that returns a promise. Call this function repeatedly, chaining each call to the previous one until all async operations are complete. Decide within the loop whether to continue chaining by returning next() inside a prior .then() handler or end the chain by returning a regular value.

...
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 automatically
                return client.execute(function (heightCaptured) {
                    window.scrollTo(0, heightCaptured);
                }, heightCaptured).then(function () {
                    console.log('captured: ' + tileFile);

                    heightCaptured += viewportSize.height;
                    yTile++;

                    // chain promises properly
                    return client.saveScreenshot('./' + tileFile).then(next);
                });

            } else {
                // End the promise chain
                return client;
            }
        }

        return next();
    }).then(function () {
        // done here
    }, function (err) {
        // error here
    });

When inside a .then() handler, returning a promise chains it to the previous promise. Returning a value ends the chain there. In this example, returning a promise from next() allows for sequential chaining until a regular value is returned to end the chain.

Hence, calling return next(); repeatedly from within the .then() handler links all screenshots in a sequential order until reaching the final value that signals the end of the chain.

Using a while loop to chain promises in webdriver.io

Answer №1

Similar questions

Can Redis be used with Promises in Node.js?

Calculating the number of rows in a dynamic jQuery table

Facing difficulties in initiating Selenium with PhantomJS/GhostDriver as child processes

What is the method for a Greasemonkey script to divide a link into three interconnected links?

Optimizing CSS for printing by eliminating unnecessary white space with media queries

hitting the value of the text input

Issue with Click event not working on dynamically added button in Angular 8

Errors in Selenium Webdriver - troubleshooting the issues

When Glue is not executed from the Stepdef in Cucumber, but the @Before setup() method is executed

Tips for repeatedly clicking a button over 50 times using Protractor

Track the loading time of a webpage and the time it takes to render all subelements of

How can we have a div stay at the top of the screen when scrolling down, but return to its original position when scrolling back up?

Transform JavaScript into Native Code using V8 Compiler

Retrieve data from each URL listed in a JSON array using React

Establish the Selenium property specifically tailored for the Selenium application

Printing keys of objects in an array in AngularJS through iteration

Using Node.js to Insert Data into MySQL

Is there a way to convert this JSON object into HTML table code?

What are the steps to execute PhantomJS on a client machine?

Scalable Vector Graphics Form Field