Expect condition inside the .then won't execute

[iamhaseebiqbal]

I'm using PageObjects in Protractor tests. Structure looks like this,

• e2e
  • specs
    • base.po.ts // Base PageObject class
    • Login
      • login.e2e-spec.ts // contains describe, it blocks etc. and Expect conditions.
      • login.po.ts // Interacts with page elements

I'm returning Promises from methods inside PageObject file. And then inside spec file in it blocks i've Expect conditions.

A sample code is like,

// login.e2e-spec.ts

    it('should logout', () => {
          console.log('---- step 1 ----');
          page.logout().then(function () {
              console.log('---- step 4 ----');
              expect(page.inDom(page.getLoginButton())).toBe(true);
          });
          console.log('---- step 5 ----');
    });

// login.po.ts

public logout() {
        const that = this;
        return new Promise(function (fulfill = null, reject = null) {
            that.clickIfElementIsAvailable(that.welcomeModelCancelButtonElement);
            that.waitForVisibility(that.sideBarOpenerElement).then(function () {
                console.log('---- step 2 ----');
                that.sideBarOpenerElement.click();

                that.waitForVisibility(that.logoutButtonElement).then(function () {
                    console.log('---- step 3 ----');
                    that.logoutButtonElement.click();
                    fulfill();

                }, reject);

            }, reject);
        });
    }

After execution, all the tests pass and i get following output in log.

---- step 1 ----
---- step 5 ----
(node:2639) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Cannot read property 'waitForElement' of undefined
(node:2639) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

3 specs, 0 failures

In practical i've multiple tests so control just moves to next tests and at the end tells that all tests passed successfully.

Now i understand that control is putting the commands in queue and moving forward. How can i handle this situation? What i'm doing wrong? Thanks.

[awarecan]

Why not use async/await since you are using TypeScript, your code will be more clearly.

BTW, you better post your question to stackoverflow.

[iamhaseebiqbal]

@awarecan ! Thanks. I tried it with async/await but nothing changed. I'm doubtful about using await condition when i've promises inside promises. For example, If i just use await with that.waitForVisibility(that.sideBarOpenerElement) then will it be enough for all the code (including promises) inside .then block? await that.waitForVisibility(that.sideBarOpenerElement).then(function () { ....... });

[IgorSasovets]

Hi, @iamhaseebiqbal ! As @awarecan mentioned, with async/await your code will be clearly. But if you want to use promises try this code snippet:

public logout() {
	const that = this;
	return that.clickIfElementIsAvailable(that.welcomeModelCancelButtonElement)
		.then(() => that.waitForVisibility(that.sideBarOpenerElement))
		.then(() => {
			console.log('---- step 2 ----');
			return that.sideBarOpenerElement.click();
		})
		.then(() => that.waitForVisibility(that.logoutButtonElement))
		.then(() => {
			console.log('---- step 3 ----');
			return that.logoutButtonElement.click();
		});
}



it('should logout', () => {
	  console.log('---- step 1 ----');
	  return page.logout().then(() => {
		  console.log('---- step 4 ----');
		  expect(page.inDom(page.getLoginButton())).toBe(true);
		  console.log('---- step 5 ----');
	  });
});

[iamhaseebiqbal]

@IgorSasovets Thanks mate. Got your point. I implemented it in different specs and its working fine. 👍