How to compare width and height of element with getSize() function with Protractor test?

Question

Good morning dear colleagues. I have a question about Selenium methods. In my case I'm testing angular application with protractor and I want to compare returns value from getSize function with set values in the my test. Here is code below -

var searchForm = element(by.id('search'));

 it('searchForm must have width: 400px and height: 400px', function(){
  //expect(browser.driver.manager().window().getSize()).toEqual(400, 400);
  searchForm.getSize();
  searchForm.width.toEqual(400);
  searchForm.height.toEqual(400);

});

please help me to solve trouble. I hope you will help me.

Answer 1

Protractor getSize() function returns a promise with the dimensions object containing width, height, hcode and class of the element specified. Wait until the promise is returned and then resolve the promise to get the dimensions of the element. Here's how -

 it('searchForm must have width: 400px and height: 400px', function(){
    var searchForm = element(by.id('search'));
    searchForm.getSize().then(function(eleSize){
        console.log('element size: '+eleSize); //eleSize is the element's size object
        expect(eleSize.width).toEqual(400);
        expect(eleSize.height).toEqual(400);
    });
});

Also it is not recommended to write anything outside a spec it in automation using jasmine. Hope it helps.