angularjs - How to execute jQuery from Angular e2e test scope?

Question

Is it possible to execute jQuery commands from Angular e2e scenario ?

for example, if I would like to execute : $('.picker-col-id-id').attr('class'); I'm getting an error:

TypeError: Property '$' of object [object Object] is not a function

Answer 1

The problem here is that the AngularJs Scenario Test Runner runs your application in an iframe. The runner itself hasn't loaded jQuery.

It's best to use the angular scenario dsl. From the e2e testing docs:

element(selector, label).{method}(key, value)

Executes the method passing in key and value on the element matching the given jQuery selector, where method can be any of the following jQuery methods: attr, prop, css. The label is used for test output.

Although not clear from the docs, you can also use the 'attr' method with only 1 argument to get the value of the attribute.

element('.picker-col-id-id').attr('class');

If you need other jQuery functionality, like focus(), you can do it this way:

element('.picker-col-id-id').query(function(elements, done) {
    elements.focus();
    done();
});

Or extend the angular dsl

angular.scenario.dsl('jQueryFunction', function() {
    return function(selector, functionName /*, args */) {
        var args = Array.prototype.slice.call(arguments, 2);
        return this.addFutureAction(functionName, function($window, $document, done) {
            var $ = $window.$; // jQuery inside the iframe
            var elem = $(selector);
            if (!elem.length) {
                return done('Selector ' + selector + ' did not match any elements.');
            }
            done(null, elem[functionName].apply(elem, args));
        });
    };
});

And use it this way:

jQueryFunction('.picker-col-id-id', 'focus');

Or in general:

jQueryFunction(selector, jQueryFunctionName, arg1, arg2, ...);