AngularJS: Accessing $scope objects in e2e tests

Question

I am building a Math tutoring application and would like to test my UI using angular's e2e testing suite.

Currently I am working on a Fraction page that generates a random fraction, displays a series of shaded and unshaded boxes and asks the user to input the fraction formed by the shading.

Using an e2e test, I would like to test how the UI responds to both correct and incorrect input; however, since the fraction is randomized on page load, I do not know what 'correct' input is from inside the test.

The easiest way for me to get the correct answers to input would be to gain access to the Fraction object, located at $scope.problemObject for the controller, and call its API functions .getNumerator() and .getDenominator(). However, I have not found a way to get to this object from within my tests.

Relevant lines from my controller are:

$scope.problemObject = Fraction.random();
// This produces an object with two relevant 
// functions (getNumerator() & getDenominator())

What I Have Tried

binding()

Initially I thought binding() would do what I needed, however all calls to binding('problemObject') or binding('problemObject.getNumerator()' and the like issue an error saying that the binding cannot be found. I suspect that this is because $scope.problemObject and the return value of $scope.problemObject.getNumerator() are not directly bound to the UI.

angular.element().scope()

Executing angular.element('#problem').scope().problemObject from the console on the page that I am testing works perfectly; however, trying the same line from within my test issues the following error: 'selectors not implemented'.

I have also tried a few variations:

element('#problem').scope().problemObject: Error: 'Object # has no method 'scope''

angular.element(element('#problem')).scope().problemObject: Error: 'Cannot read property 'problemObject' of undefined'

binding() only works for finding the value of {{bindingName}} expressions in your HTML document. That will generally be a primitive, not an object. — Steve Goodman, Jan 28 '13 at 20:01

Tosh · Answer 1 · 2012-08-16T21:45:30.647

0

I guess 'element' in e2e test and 'angular.element' are different objects. You may want to try reading the value from the view.

if it is input field.

var value = element('#problem').val();

Otherwise, something like:

var value = element('#problem').text();

(Looking into scope object from e2e is kind of cheating in my opinion.)

Edit

I totally misunderstood the question and construct of the web page. Sorry for the confusion. What it has to validate is the input fields against numbers of the shaded and non-shaded boxes ('td' elems in this example).

var total = element('td').count()
  , fraction = element('td.shaded').count();

Idea is same, it is trying to get the numbers from the view, not from $scope.

edited Aug 16 '12 at 21:45

answered Aug 15 '12 at 03:13

Tosh

35,955
11
65
55

1

The problem is that the values that I need (the numerator and denominator of the fraction) are not bound to the DOM directly. They exist in the Fraction object hanging off the controller's scope. Their values are determined at runtime through a randomization routine. Normally I would not need these values in an e2e test; however, I would like to test the UI's response to correct and incorrect input. The test cannot know what correct input is unless it can access these values in some way. I could always put them in a `data-` element for testing, but I was hoping for a better solution. – Noah Freitas Aug 15 '12 at 17:26
Sorry if my suggestion was not clear to you. If the number is displayed, it means it is part of dom tree (or is it image or something?). Can't you just access the text element? That's what I meant. For example, if it is "{{ number }}", then I can get to the number using jquery by "$('span').text()". – Tosh Aug 16 '12 at 12:15
1

Thanks for sticking with me. The only elements on the page (aside from some instructional text) are two input boxes (for the user's numerator and denominator answers) and a visual (HTML table without any textual data) which represents the fraction. I could use the visual to deduce the state of the Fraction object in the controller, but this moves the source of truth to the output of a custom directive, which might itself be buggy. You can see a prototypal, non-randomized version of the page here: http://math.threepiecedesign.com/#/fractions/meaning-of-fractions – Noah Freitas Aug 16 '12 at 15:47
I edit my response according to the correct understanding of the view. – Tosh Aug 20 '12 at 00:29

score 0 · Answer 2 · answered Feb 28 '13 at 05:43

Turns out the problem lies in the scope being stored in jQuery's data. Since jQuery stores the data in a hashtable as $.cache global, once we are outside of the frame that the test webpage is running in, we no longer have access to them. The way I solved it is by accessing the jQuery inside the iframe's window (conveniently given in the $window parameter).

Below is what I come up with to access the scope. You can do scope('#myElement', 'foo.bar') to query $scope.foo.bar.

angular.scenario.dsl('scope', function() {
return function(selector, entry) {
    return this.addFutureAction('find scope variable for \'' + selector + '\'', 
        function($window, $document, done) {
            var $ = $window.$; // jQuery inside the iframe
            var elem = $(selector);
            if (!elem.length) {
                return done('No element matched \'' + selector + '\'.');
            }
            var entries = entry.split('.');
            var prop = elem.scope();
            for (var i in entries) {
                prop = prop[entries[i]];
            }
            done(null, prop);
        });
    };
});

Don't know why this was downvoted. It is a neat solution to the question, and worked for me. — Richard Kennard, Aug 30 '16 at 00:50

AngularJS: Accessing $scope objects in e2e tests

2 Answers2

Edit