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

Utilizing JavaScript files within Angular2 components: A guide

I am unable to halt the relentless stream of asynchronous events

Ways to personalize the onSubmit function within tinacms

What is the best way to conceal the HTML video controls for multiple videos displayed on a single webpage?

Retrieve and dynamically load an entire webpage using AJAX

Customized settings saved in local storage using JavaScript

Setting up your own local Jquery Mobile Angular Adapter Todo app is easy and seamless

Is it possible to modify @page directive(CSS) values from the code-behind(C#) or JavaScript?

Verify if spacebar is pressed and then use jQuery to add a hashtag with multi-language support

JavaScript's Use of Brackets

Completes a form on a separate website which then populates information onto a different website

Is it possible to test an Angular application using Protractor within an iframe that is hosted by a non-Angular

Enhancing the capabilities of my search and select filter beyond the boundaries of ng-app in AngularJS

Guide to importing an AngularJS controller into an Express file (routes.js)

Error: Material-UI prop type validation failed - Please specify either `children`, `image`, `src`, or `component` prop

Is Cookie-session the most ideal choice for React applications?

Three.js experiences a memory leak issue

The requested 'Pagination' component (imported as 'Pagination') could not be located within the 'swiper' library. Possible exports include Swiper and default

Unable to get PrependTo to remove itself when clicked

Guide to testing a JavaScript function in Mocha that accepts a select element