Protractor locator issues

Question

My goal is to pull the css width of a particular element.

The actual jQuery command I use in Chrome console works well :

$('div-grid-directive[grid-name="SAT"] .qMinus1_resize_expand').first().css('width');
"0px"

However, running Protractor in a Win 7 cmd prompt, I'm getting the following error:

Message:
  Failed: element(...).first is not a function

The error points to my objects page topNav.icons.page.js, in this.getQMinus1Column :

module.exports = function(){        
    this.clickExpandRowsIcon = function(){
        $('.resize-btns > .glyphicon.glyphicon-resize-horizontal').click();
        browser.driver.sleep(2000);
    };
    this.getQMinus1Column = function(){            
        return element(by.css('div-grid-directive[grid-name="SAT"] .qMinus1_resize_expand')).first();
    };
};

and my SAT.spec.js file :

var IndexPage = require('./pageObjects/index.page.js');
var TopNavBar = require('./pageObjects/topNav.icons.page.js');

describe('Testing the Sales & Trading Top Nav grid icons', function(){
    var indexPage = new IndexPage();
    var topNavBar = new TopNavBar();
    
    beforeEach(function () {
        indexPage.get();   // Launches app !!        
    });
    describe('Clicking on the Expand Rows icon', function () {
  
        it('Should horizontally expand previous quarters qMinus1 thru qMinus6', function () {        
            topNavBar.clickExpandRowsIcon();
            var elem = topNavBar.getQMinus1Column();

            expect(elem).getCssValue().indexOf('width: 5px;').not.toBe('-1');            
	 });
    });
    
});

So before I even try to get the css width attribute, I'm struggling to return first(), using this format:

return element(by.css('MY-CSS')).first();

Do I have too much going on in this line, or perhaps the wrong syntax for Protractor ?

 return element(by.css('div-grid-directive[grid-name="SAT"] .qMinus1_resize_expand')).first();

Again, the same syntax works using jQuery in console tools, so the CSS select is correct.

Advice is greatly appreciated here...

regards, Bob

Answer 1

As per this , element does not return a collection of objects to call first method in it.

Probably you might want to use element.all(locator)