Dispensing guarantees with Protractor

Question

Dispensing guarantees with Protractor

q library offers a unique feature that allows resolving and spreading multiple promises into separate arguments:

If you have a promise for an array, you can utilize spread instead of then. The spread function distributes the values as arguments in the fulfillment handler.

return getUsername()
    .then(function (username) {
        return [username, getUser(username)];
    })
    .spread(function (username, user) {

    });

In our work with protractor, we are exploring the capabilities of the built-in protractor.promise from WebDriverJS.

The Query:

Is it feasible to implement the "spread" functionality using protractor.promise?

A Practical Example:

We have developed a custom jasmine matcher to verify if an element is focused. This requires resolving two promises before conducting an equality comparison. Currently, we rely on protractor.promise.all() and then():

protractor.promise.all([
    elm.getId(),
    browser.driver.switchTo().activeElement().getId()
]).then(function (values) {
    jasmine.matchersUtil.equals(values[0], values[1]);
});

Ideally, we would prefer a more readable approach such as:

protractor.promise.all([
    elm.getId(),
    browser.driver.switchTo().activeElement().getId()
]).spread(function (currentElementID, activeElementID) {
    return jasmine.matchersUtil.equals(currentElementID, activeElementID);
})

javascript angularjs selenium-webdriver promise protractor

Answer 1

Answer №1

If you find it a bit messy to use, there is a solution. You can create a separate helper function that can be passed as a parameter to then() and contain a callback which is typically passed to then(). This helper function will then convert the array value into function arguments:

protractor.promise.all([
    elm.getId(),
    browser.driver.switchTo().activeElement().getId()
]).then(spread(function (currentElementID, activeElementID) {
    // Use the helper function to spread arguments
    jasmine.matchersUtil.equals(currentElementID, activeElementID);
}));


// The helper function takes a callback
function spread(callback) {
    // It returns a new function to be used by `then()`
    return function (array) {
        // Call the callback using apply to spread the array values 
        return callback.apply(null, array);
    };
}

You can still chain it with another then() and provide rejection callbacks; this maintains the behavior of Protractor promises while converting an array of values into arguments.

A downside is that it doesn't look exactly like your example (not .all().spread(), but .all().then(spread())) and you may need to create a module for this helper or define it globally for easier use in multiple test files.

Update:

With ES2015, you can now utilize destructuring assignment along with then():

protractor.promise.all([
    elm.getId(),
    browser.driver.switchTo().activeElement().getId()
]).then(function (values) {
    // Use destructuring assignment to separate variables
    const [currentElementID, activeElementID] = values; 
    jasmine.matchersUtil.equals(currentElementID, activeElementID);
}));

Answer 2

If you find it a bit messy to use, there is a solution. You can create a separate helper function that can be passed as a parameter to then() and contain a callback which is typically passed to then(). This helper function will then convert the array value into function arguments:

protractor.promise.all([
    elm.getId(),
    browser.driver.switchTo().activeElement().getId()
]).then(spread(function (currentElementID, activeElementID) {
    // Use the helper function to spread arguments
    jasmine.matchersUtil.equals(currentElementID, activeElementID);
}));


// The helper function takes a callback
function spread(callback) {
    // It returns a new function to be used by `then()`
    return function (array) {
        // Call the callback using apply to spread the array values 
        return callback.apply(null, array);
    };
}

You can still chain it with another then() and provide rejection callbacks; this maintains the behavior of Protractor promises while converting an array of values into arguments.

A downside is that it doesn't look exactly like your example (not .all().spread(), but .all().then(spread())) and you may need to create a module for this helper or define it globally for easier use in multiple test files.

Update:

With ES2015, you can now utilize destructuring assignment along with then():

protractor.promise.all([
    elm.getId(),
    browser.driver.switchTo().activeElement().getId()
]).then(function (values) {
    // Use destructuring assignment to separate variables
    const [currentElementID, activeElementID] = values; 
    jasmine.matchersUtil.equals(currentElementID, activeElementID);
}));

Answer 3

Answer №2

TL;DR: It seems that simply replacing protractor.promise with q may not be completely safe. When extending ElementArrayFinder, I encountered a hanging test run.

Take elements while a condition evaluates to true (extending ElementArrayFinder)

Previous solution:

Here is what I did to address this issue.

I decided to switch from protractor.promise to q on the go, although I wasn't sure about the safety of this approach:

onPrepare: {
    protractor.promise = require("q");
},

Surprisingly, nothing has broken so far and now I can utilize spread() and other helpful features offered by q using protractor.promise:

toBeActive: function() {
    return {
        compare: function(elm) {
            return {
                pass: protractor.promise.all([
                    elm.getId(),
                    browser.driver.switchTo().activeElement().getId()
                ]).spread(function (currentElementID, activeElementID) {
                    return jasmine.matchersUtil.equals(currentElementID, activeElementID);
                })
            };
        }
    };
}

Check out the relevant github thread: protractor.promise to use q.

Answer 4

TL;DR: It seems that simply replacing protractor.promise with q may not be completely safe. When extending ElementArrayFinder, I encountered a hanging test run.

Take elements while a condition evaluates to true (extending ElementArrayFinder)

Previous solution:

Here is what I did to address this issue.

I decided to switch from protractor.promise to q on the go, although I wasn't sure about the safety of this approach:

onPrepare: {
    protractor.promise = require("q");
},

Surprisingly, nothing has broken so far and now I can utilize spread() and other helpful features offered by q using protractor.promise:

toBeActive: function() {
    return {
        compare: function(elm) {
            return {
                pass: protractor.promise.all([
                    elm.getId(),
                    browser.driver.switchTo().activeElement().getId()
                ]).spread(function (currentElementID, activeElementID) {
                    return jasmine.matchersUtil.equals(currentElementID, activeElementID);
                })
            };
        }
    };
}

Check out the relevant github thread: protractor.promise to use q.

Dispensing guarantees with Protractor

Answer №1

Answer №2

Similar questions

Creating a stunning art exhibition using React Native

I seem to be stuck in an endless loop within React and can't find a way to break free

Is Grouping Together Installed Private Modules Possible?

Ajax alert: The index 'id' is not defined

Load Angular scripts only when needed

How come running `npm install <folder>` results in installing different dependencies compared to `npm install lib`?

IONIC App detecting lack of internet connectivity

Delete items within the first 10 minutes of shutting it down

What is the best way to adjust the width of a textarea based on its content

Exploring the dynamic data loading feature in Vue 3 by fetching data from the server and displaying it using a v-for

Steps to load a script when the document is ready:

What steps should be taken to retrieve the contents of a file that has been chosen using the browse

Several middlewares using router.params()

Creating a Typescript interface for a anonymous function being passed into a React component

Looking to integrate the date, month, and year selection tags into the inline format

Steps for generating a time selection dropdown menu

invoke the modal function from a separate React file

Troubleshooting Bootstrap 4 Modal in JavaScript and Vue: Uncaught ReferenceError: $ is not defined

Setting the initial state for your ngrx store application is a crucial step in ensuring the

Utilizing React for incorporating HTML5 canvas gradients