Why do I get a message saying “Object is not a function” when I try to do an apply?

Question

I set up some variables to hold page elements:

this.examStatusSelect = element(by.id('examStatusSelect'));
this.examTypeSelect = element(by.id('examTypeSelect'));

I have this function call:

    dom.checkGrid('* check', 0, [
        [page.examStatusSelect, 0],
        [page.examTypeSelect, 0],
    ]);

What I wanted to do was make a call to another function like this:

var Dom = function () {

var self = this;

this.getSelectOption = function (element, value) {
    var id = element.locator_.value;
    return element(by.xpath('//select[@id="' + id + '"]/option[@value = "' + value + '"]'));
}

this.checkGrid = function (label, expectedCount, params) {
    it(label + ': Check for ' + expectedCount + ' grid rows', function () {
        for (var i = 0; i < params.length; ++i) {
            self.getSelectOption.apply(self, params[i]).click();
        }
        page.retrieveButton.click();
        expect(page.row.count()).toBe(expectedCount);
    });
}

But I am getting a strange error pointing to the line with the xpath. The error is

TypeError: Object is not a function

I cannot see what this means. Can someone suggest what I might be doing wrong? I'm also not sure what is the purpose of the self after apply( ?

Answer 1

You are redefining element in the local scope. Instead name your input parameter elem for example like so:

this.getSelectOption = function (elem /* local scope */, value) {
    var id = elem.locator_.value; /* elem is local scope here */
    /* element is from the not local scope 
       (might be global, could also be from a closure) */
    return element(by.xpath('//select[@id="' + id + '"]/option[@value = "' + value + '"]'));
}