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

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

However, I am confused about how to use the object returned by this method. The offset () call returns an object with top and left properties . When I try to access these properties in a 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 to use the return from offset () to plot the expected value something like this:

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

      


Update

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

+3


source to share


2 answers


Found an 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 problem open in the Angular github repo for more elegant integration into ScenarioRunner.

+3


source


You don't really need to go through jQuery. This should work fine:

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

      



If not, can you post a complete minimal example on jsfiddle or plunker?

+2


source







All Articles