Using element().offset() in AngularJS E2E test

Question

I am writing an end-to-end test in Angular, and I would like to verify the position of a DOM element in relation to another DOM element. Fortunately, the Angular E2E DSL has a passthrough method for jQuery's offset() method. Perfect for my use case!

However, I'm confused how to use the object that this method returns. The call to offset() returns an object with the properties top and left. When I try to access these properties in the test, Angular complains.

This code works great:

expect(element("#anID").offset()).toEqual({"top":100,"left":100});

This code doesn't work, and throws an error:

expect(element("#anID").offset().top).toEqual(100);

TypeError: Cannot read property 'name' of undefined
    at Object.angular.scenario.matcher.(anonymous function) (http://localhost:8000/test/angular/angular-scenario.js:23994:41)
    at Object.executeStatement (http://localhost:8000/test/angular/angular-scenario.js:23960:30)
    at Object.chain.(anonymous function) [as toEqual] (http://localhost:8000/test/angular/angular-scenario.js:23968:37)
    at Object.<anonymous> (http://localhost:8000/test/E2E-scenarios.js:78:53)

How do I use the return from offset() to construct an expectation roughly like:

expect(element("#anID").scrollTop() - element("#anotherID").offset().top).toEqual(100);

---

Update

After the back and forth with Josh David Miller, I see my real question is: how can I get the value of an angular.scenario.Future object outside of an expect() call, so I can use it as the basis of other expectations?

Answer 1

Found the answer on the Angular mailing list. Something like this will work for using multiple angular.scenario.Future object values in a single expectation:

  it('async expectation', function() {
    browser().navigateTo('index.html');
    var relativeElement = element("#anID").prop( 'offsetTop' )

    this.addFuture('ScenarioRunner step title', function(done) {
      expect(element('#anotherID').scrollTop()).toEqual(relativeElement.value - 100);
      done();
    });
  });

There's a issue open on the angular github repo for integrating this into the ScenarioRunner more elegantly.

Answer 2

You actually shouldn't need the jQuery passthrough. This should work just fine:

expect( element.prop( 'offsetLeft' ) ).toEqual( 361 );
expect( element.prop( 'offsetTop' ) ).toEqual( 451 );

If it doesn't, can you post a full minimal example on jsfiddle or plunker?