Execution skips promise statements

Question

I am facing a issue that sometimes the promise code is executed and some time it just skip it the statements handling promise i.e using then statement, I have tried two approaches still having the issue.

few confusing points:

• should I do not use await with line of code handling promise like using then
• should I use async keyword in then function like

Example:

 await item.element(by.css("h4 a")).getText().then(async(text)=> {
            if (text == product) {
                await item.element(by.css("button[class*='btn-info']")).click();
            }

Working result:

In above image the results of variable printed like 80000 etc

My code is as below:

First approach:

I have replace every function keyword and put async with fat function, I also added the await where ever it allows me. also, I have use await and then together

import { Given, When, Then } from "cucumber";
import { browser, element, by } from "protractor";
import { async } from "q";
import chai from "chai"

let assert = chai.assert;
async function selectItems(product) {
    //take 4 cards into list
    //go through each index in the list - and get the title= if title =desired title then in that index i will select add button
    await element.all(by.tagName("app-card")).each(async(item) => {

      await item.element(by.css("h4 a")).getText().then(async(text)=> {
            if (text == product) {
                await item.element(by.css("button[class*='btn-info']")).click();
            }
        })
    })
}
Given(':I will navigate to qaacamedy site', async () => {
   await browser.get("https://qaclickacademy.github.io/protocommerce/");
   await console.log("browser lunched");
  });

  When(': click on the shop and add all products in cart', async () => {
    await element(by.linkText("Shop")).click();
    await selectItems("Samsung Note 8");
    await selectItems("iphone X");

    await element(by.partialLinkText("Checkout")).getText().then(function(text) {
        let res = text.split("(");
        let x = res[1].trim().charAt(0);
        let y = x;
        console.log(y);
        assert.equal(res[1].trim().charAt(0),x);
    })
  });

  When(': I calculate all price', async () => {
    let value;
    let amount=new Array() ;
    let set= new Set();
    await element(by.partialLinkText("Checkout")).click();
    await element.all(by.css("td[class*='text-center']")).each(function(item){
          item.element(by.css("strong")).getText().then(function(text) {
               console.log(text);
               let res =text.split('.');
               value=Number(res[1].trim());
               amount.push(value);
               set.add(value);
               console.log("my value ="+value);
               console.log("my amounts"+amount);
        }) 
    })
        let add=0;
            // for (let i = 0; i < amount.length; i++) {
            //     await console.log("array value = "+amount[i]);
            //     add=add+amount[i];
            //  }
             for (let num of set) {

              await console.log("iterbale value of set = "+num);     //1 2 3 4 5 6
               add=add+num;
            }


             await console.log("total calculate value ="+add);
             await console.log("my amounts final"+amount);
  });

  Then(': some should be shown', async () =>  {
    await console.log("Then Statement");
  });

As shown in above result the statements are not printed now, but sometimes I get results

Second approach:

I have tried to put promise function as async as well:

import { Given, When, Then } from "cucumber";
import { browser, element, by } from "protractor";
import { async } from "q";
import chai from "chai"

let assert = chai.assert;
async function selectItems(product) {
    //take 4 cards into list
    //go through each index in the list - and get the title= if title =desired title then in that index i will select add button
    await element.all(by.tagName("app-card")).each(async(item) => {

      await item.element(by.css("h4 a")).getText().then(async(text)=> {
            if (text == product) {
                await item.element(by.css("button[class*='btn-info']")).click();
            }
        })
    })
}
Given(':I will navigate to qaacamedy site', async () => {
   await browser.get("https://qaclickacademy.github.io/protocommerce/");
   await console.log("browser lunched");
  });

  When(': click on the shop and add all products in cart', async () => {
    await element(by.linkText("Shop")).click();
    await selectItems("Samsung Note 8");
    await selectItems("iphone X");

    await element(by.partialLinkText("Checkout")).getText().then(async(text)=> {
        let res = text.split("(");
        let x = res[1].trim().charAt(0);
        let y = x;
        await console.log(y);
        await assert.equal(res[1].trim().charAt(0),x);
    })
  });

  When(': I calculate all price', async () => {
    let value;
    let amount=new Array() ;
    let set= new Set();
    await element(by.partialLinkText("Checkout")).click();
    await element.all(by.css("td[class*='text-center']")).each(async(item)=>{
          item.element(by.css("strong")).getText().then(async(text)=> {
               await console.log(text);
               let res =text.split('.');
               value=Number(res[1].trim());
               amount.push(value);
               set.add(value);
               await console.log("my value ="+value);
               await console.log("my amounts"+amount);
        }) 
    })
        let add=0;
            // for (let i = 0; i < amount.length; i++) {
            //     await console.log("array value = "+amount[i]);
            //     add=add+amount[i];
            //  }
             for (let num of set) {

              await console.log("iterbale value of set = "+num);     //1 2 3 4 5 6
               add=add+num;
            }


             await console.log("total calculate value ="+add);
             await console.log("my amounts final"+amount);
  });

  Then(': sum should be shown', async () =>  {
    await console.log("Then Statement");
  });

Here in second approach also I am getting the same issue.

Also suggest, Is it a good practice to handle the promise function as well as below:

await element(by.partialLinkText("Checkout")).getText().then(async(text)=> {

In both above approach I have use below flag:

SELENIUM_PROMISE_MANAGER: false,

This problem always occur specially after If I use debug mode using launch.json

My feature file looks like below:

Feature: I am going to validate the qaacamedy site

Scenario: practice assignment

    Given :I will navigate to qaacamedy site
    When : click on the shop and add all products in cart 
    When : I calculate all price 
    Then : sum should be shown

have also tried to delete the async , async kit and protractor package and install it again, once it worked but after sometime again it start showing me issue. not understanding why the same code behavior differently, I don't getting the main cause of issue, stucking from many days on same

Please look into it, that the last heavy issue I am stucking with protractor

Answer 1

Since you are using async/await you should avoid traditional promise handling (e.g. then). It also looks like you are awaiting methods that do not return a promise, which is essentially pointless. Declaring async on callback does not make the calling method asynchronous.

A proper implementation of selectItems would look something like this:

async function selectItems(product) {
    // async functions return a promise, use 'map' so we can wait for the promises to resolve using Promise.all
    const promises = element.all(by.tagName("app-card")).map(async (item) => {
        // use await on getText() since it returns a promise
        const text = await item.element(by.css("h4 a")).getText();
        if (text == product) {
            // return the promise produced by 'click'
            return item.element(by.css("button[class*='btn-info']")).click();
        }
    });
    return Promise.all(promises);
}

The tests should also be updated to avoid mixing async/await syntax with traditional promise handling.