TypeError: Cannot read property 'ELEMENT' of undefined

[mgol]

When issues from #902 were resolved & Protractor 0.24.1 was released, I tried again to upgrade from 0.22.0. Unfortunately, I get a cryptic error:

  1) Item panel toolbox note tab adding notes (type: pin) should remove just created notes
   Message:
     TypeError: Cannot read property 'ELEMENT' of undefined
   Stacktrace:
     TypeError: Cannot read property 'ELEMENT' of undefined
==== async task ====
WebDriver.call(function)
==== async task ====
Asynchronous test function: it()
Error
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.defs.js:316:17)
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.defs.js:251:13)
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.defs.js:243:9)

The test itself is as follows (line 316 column 17 points to the it):

it('should remove just created notes', function () {
    tabElems.notes.element(by.repeater('note in page.notes'))
        .then(function (collection) {
            collection.forEach(function (noteElem) {
                // Activate a note.
                noteElem.element(by.css('.item-header')).click();

                noteElem.element(by.css('.delete')).click();
            });
            tabElems.notes
                .all(by.repeater('note in page.notes'))
                .then(function (collection) {
                    expect(collection.length).toBe(0);
                });
        });
});

The `beforeEach block:

beforeEach(function () {
    ['info', 'search', 'view', 'notes', 'bookmarks'].forEach(function (tabName) {
        tabTriggerElems[tabName] = $('cbn-item-panel-toolbox .tab-links button.tab-' + tabName + '-link');
        tabElems[tabName] = $('cbn-item-panel-toolbox .tabs-content .tab-' + tabName);
    });
});

The whole test file is quite complicated so for now I'm just sharing this info. The error should be more descriptive anyway, especially that it points just to the test definition and not to anything inside it. Does it say a lot to you? I can try to isolate sth further if there's a need but that might not be easy.

[juliemr]

This is due to the breaking changes with ElementFinder in 0.24.0 - try

it('should remove just created notes', function () {
    tabElems.notes.element(by.repeater('note in page.notes')).each(function (noteElem) {
                // Activate a note.
                noteElem.element(by.css('.item-header')).click();

                noteElem.element(by.css('.delete')).click();
            });
            tabElems.notes
                .all(by.repeater('note in page.notes'))
                .then(function (collection) {
                    expect(collection.length).toBe(0);
                });
        });
});

[mgol]

@juliemr Your code has mismatched brackets, I assume you meant:

it('should remove just created notes', function () {
    tabElems.notes.element(by.repeater('note in page.notes'))
        .each(function (noteElem) {
            // Activate a note.
            noteElem.element(by.css('.item-header')).click();

            noteElem.element(by.css('.delete')).click();
        });
    tabElems.notes
        .all(by.repeater('note in page.notes'))
        .then(function (collection) {
            expect(collection.length).toBe(0);
        });
});

(why did you change only the first part of the code?)

Anyway, it doesn't work:

  1) Item panel toolbox note tab adding notes (type: pin) should remove just created notes
   Message:
     TypeError: Object [object Object] has no method 'each'
   Stacktrace:
     TypeError: Object [object Object] has no method 'each'
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.defs.js:396:26)
==== async task ====
Asynchronous test function: it()
Error
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.defs.js:394:17)
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.defs.js:329:13)
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.defs.js:321:9)

[juliemr]

Ah, sorry, one more typo - you want to get an ElementArrayFinder, so you need to do:

it('should remove just created notes', function () {
    tabElems.notes.all(by.repeater('note in page.notes')) // Change here - .all instead of .element
        .each(function (noteElem) {
            // Activate a note.
            noteElem.element(by.css('.item-header')).click();

            noteElem.element(by.css('.delete')).click();
        });

[mgol]

With the following code:

it('should remove just created notes', function () {
    tabElems.notes.all(by.repeater('note in page.notes'))
        .each(function (noteElem) {
            // Activate a note.
            noteElem.element(by.css('.item-header')).click();

            noteElem.element(by.css('.delete')).click();
        });
});

I get the same error as at the beginning:

  1) Item panel toolbox note tab adding notes (type: pin) should remove just created notes
   Message:
     TypeError: Cannot read property 'ELEMENT' of undefined
   Stacktrace:
     TypeError: Cannot read property 'ELEMENT' of undefined
==== async task ====
WebDriver.call(function)
==== async task ====
Asynchronous test function: it()
Error
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.defs.js:394:17)
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.defs.js:329:13)
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.defs.js:321:9)

where line 394:17 points to it.

As for the change - how is it possible now to get the whole collection and not only iterate over it? I was using then & forEach here so this could be replaced but in a different place I needed to check the size of the collection so I need it as a whole.

[mohsen1]

FYI we had a conversation about this at #922

[hankduan]

Does this work for you? #922 (comment)
It's because you're removing elements with clicks. (Read the link I sent for details)

The way you wrote your example (especially the count part) is not very clean, and can be cleaned up like this:

it('should remove just created notes', function () {
    var allElems = tabElems.notes.all(by.repeater('note in page.notes'));

    allElems.then(function (collection) {
        for (i = collection.length; i >= 0; --i) {
            var noteElem = collection[i];

            // Activate a note.
            noteElem.element(by.css('.item-header')).click();
            noteElem.element(by.css('.delete')).click();
        }
    });
    expect(allElems.count()).toEqual(0);
});

I didn't try running this, so fix syntax as you encounter them

[hankduan]

I think this is resolve? Please reopen if necessary

[mgol]

@hankduan The issue is not resolved for me, could you reopen? (I can't do it myself).

I don't understand what you're proposing, could you elaborate what's different to what I currently have?

I tried again with the newest Protractor 0.24.2 and the error is now less cryptic but still surprising. With the test:

it('should remove just created notes', function () {
    tabElems.notes.all(by.repeater('note in page.notes'))
        .then(function (collection) {
            collection.forEach(function (noteElem) {
                noteElem.element(by.css(('.item-header')).click();
                noteElem.element(by.css('.delete')).click();
            });
        });
});

I get the following error:

  1) Item panel toolbox note tab adding notes (type: pin) should remove just created notes
   Message:
     Error: Index out of bound. Trying to access index:1, but locator: by.repeater("note in page.notes") only has 1 elements
   Stacktrace:
     Error: Index out of bound. Trying to access index:1, but locator: by.repeater("note in page.notes") only has 1 elements
==== async task ====
WebDriver.call(function)
==== async task ====
Asynchronous test function: it()
Error
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.js:394:17)
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.js:329:13)
    at null.<anonymous> (/Users/mgol/Documents/projects/bn/cbn/repo/polona-gui/test/e2e/spec/item-panel.js:321:9)

I get the same error when I change the test to what @juliemr suggested, i.e.:

it('should remove just created notes', function () {
    tabElems.notes.all(by.repeater('note in page.notes'))
        .each(function (noteElem) {
            noteElem.element(by.css('.item-header')).click();
            noteElem.element(by.css('.delete')).click();
        });
});

[hankduan]

It's just like doing this in javascript:

var x = [1,2,3], len = 3;
for (i=0; i<len; ++i) {
  console.log(i + ':' + x[i]);
  if (x[i] === 1) {x.splice(i,1);} // Remove the element if it's === 1
}

output: 
0:1
1:3
2:undefined

You can see that the last element is undefined. In protractor, instead of returning undefined, we just throw an index out of bounds exception