Bad wait: "Expected [] will be an empty array."

Question

Here is a failed test:

describe("Checking errors", function () { var scope = {}; beforeEach(function () { browser.get("/#endpoint"); browser.waitForAngular(); scope.page = new MyPage(); }); it("should not show any errors", function () { expect(scope.page.errors).toBeEmptyArray(); }); }); 

where MyPage is the page object:

 var MyPage = function () { this.errors = element.all(by.css("div.error-block b.error")) .filter(function (elm) { return elm.isDisplayed().then(function (value) { return value; }); }) .map(function (elm) { return elm.getText(); }); }; module.exports = MyPage; 

where errors should be an array of visible error texts found on the page.

Here is the error we get:

 Failures: 1) Checking errors should not show any errors Message: Expected [ ] to be empty array. Stacktrace: Error: Failed expectation 

FYI, toBeEmptyArray() counter comes from third-party jasmine-matchers .

---

I tried to print the value of scope.page.errors as follows:

 scope.page.errors.then(function (errors) { console.log(errors); }); 

And printed as [] . Array.isArray(errors) returns true .

From what I see, scope.page.errors is an empty array, but the wait fails. What am I missing?

Answer 1

The answer consists of four lines in protractor src .

ElementArrayFinder extends Promise , while jasmine-matchers check first checks that the errors are the actual array, just like Array.isArray is done , which will return false;

This is also consistent with expect(scope.page.errors.length).toBe(0) undefined, since promises has no length.

Just run errors.then at your promise and verify that the [] argument also showed that you can do this when you run scope.page.errors.then

Answer 2

 Inside test script your code line "scope.page = new MyPage();" is creating new empty MyPage object.Code which you have written in application script is creating page object locally and its not bounded with any angular scope.When there is requirement of testing such objects you need to replicate code for page object creation in beforeEach(); block of test script.And test it. describe("Checking errors", function () { var scope = {}; var MyPage ; beforeEach(function () { browser.get("/#endpoint"); browser.waitForAngular(); MyPage = function () { this.errors = element.all(by.css("div.error-block b.error")) .filter(function (elm) { return elm.isDisplayed().then(function (value) { return value; }); }) .map(function (elm) { return elm.getText(); }); }; }); it("should not show any errors", function () { expect(MyPage.errors).toBeEmptyArray(); }); });