Cypress - how to properly wait for result of an imported JS function

Question

I am new to Cypress (and naive to JS). I would like to write a JS library as a wrapper to 3rd party APIs. I write the API wrapper as an individual file (instead of using Cypress Custom functions) because I believe I can share the library with teams NOT using Cypress E2E tool.

The problem I am facing is "I cannot let my code to be executed sequentially in order"

From the result, I can see:

the data didn't return successfully
it looks like the "getTestPlanIdByName:20974" were executed last, but I expect it should be executed before "line 01b testPlanId:{}"

I need to help to know the correct way to handle the flow sequentially in Cypress/Javascript, thanks.

API Library(api-util.js)

let axios = require('axios'); 
const proxy = "http://10.8.8.8:8080/";
const apiPatToken = 'OmdrvbvvvvvvvvWZqa2E='

let proxyAgentHttps = require('https-proxy-agent');
let proxyAgentHttp = require('http-proxy-agent');
let agentHttps = new proxyAgentHttps(proxy);
let agentHttp = new proxyAgentHttp(proxy);

let config = {
  baseURL: 'https://dev.3rdparty.com/mycompany/myaccount/_apis',
  url: 'DUMMY_INJECTED_LATER',
  httpsAgent: agentHttps,
  httpAgent: agentHttp,
  proxy:false,
  headers: {
    'Authorization': `Basic ${apiPatToken}`
  }
}

export async function getTestPlanIdByName(testplan_name){
  config.url = '/test/plans?api-version=5.0'
  let found = ''
  axios.request(config).then( resp => {
    found = resp.data.value.find(function(item, index, array){
      return item.name === testplan_name
    })
  })
  .then(() => {
    console.log("getTestPlanIdByName:"+found.id)
    return found.id
  })
  .catch(err => console.log(err))
}

My Cypress code

import * as UTIL from 'api-util.js'

describe('CI-', () => {
  let testPlanId = 'none'

  it('01 Get TestPlanID', () => {
    //use cy.log() get a Promise for flow control
    cy.log() 
    .then(() => {   
      new Cypress.Promise((resolve, reject) => {
        console.log("01a testPlanId:"+JSON.stringify(testPlanId))
        testPlanId = UTIL.getTestPlanIdByName("TESTPLAN-Regression") 
        console.log("01b testPlanId:"+JSON.stringify(testPlanId))
      })
    })
    .then(() => {   
      console.log("01c testPlanId:"+JSON.stringify(testPlanId))
    })
  });

  it('02 Get TestSuitesList', () => {
    console.log("02 testPlanId:"+testPlanId)
    // UTIL.getTestSuitesIdList(testPlanId)
  });
});

There is a **async**, **Await**, and **Promise** function available in javascript which holds the next code until the await function execution is completed, Kindly go through this — Syed Arsalan Hussain, Mar 30 '21 at 07:17
Thanks, actually I did, but it didn't work out on me. Probably I just didn't know the right trick. A post states "Cypress isn't compatible with Promise" https://stackoverflow.com/questions/52154037/wait-for-an-own-function-which-returns-a-promise-before-tests-are-executed My problem is I am not well educated enough to figure this out by myself. — GreenLake4964, Mar 30 '21 at 07:21
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Krzysztof Krzeszewski, Mar 30 '21 at 07:21
This is the best part my friend of programming that you have to learn every time. If you will not by yourself you would not be a good programmer. — Syed Arsalan Hussain, Mar 30 '21 at 07:22

score 2 · Accepted Answer · answered Apr 06 '21 at 02:32

Thank you all. Cypress flow isn't 100% compatible with standard JS Promise (Wait for an own function (which returns a promise) before tests are executed). After relentless testings, I decided to use a Cypress Custom Command wrapper to wrap my in-house JS library. Though adding an extra layer may seem a little cumbersome. But I am satisfied with the result. Share my code here in case anyone might need it. :)

Cypress Code

  before('Prepare TestPlanId', () => {
    cy.getTestPlanIdByName(testPlanName)
    .then((result) => {
      testPlanId = result
      console.log("#01_SDET_testplan:Prepare TestPlanId# "+testPlanId)
    })
  });

Cypress Custom Command

Cypress.Commands.add('getTestPlanIdByName', (wk_testplan_name) => {
  return new Cypress.Promise((resolve, reject) => {
    TESTPLAN_API.getTestPlanIdByName(wk_testplan_name)
    .then(function (data) {
      resolve(data);
    })
  });
})

In-house JS library

export async function getTestPlanIdByName(wk_testplan_name){

  return new Promise((resolve, reject) => {
      config.method = 'get'
      config.url = '/test/plans?api-version=5.0'
      let found = ''

      axios.request(config).then( resp => {
        found = resp.data.value.find(function(item, index, array){
          return item.name === wk_testplan_name
        })
      })
      .then(() => {
        resolve(found.id)
      })
      .catch(err => console.log(err))
  })
}

Cypress - how to properly wait for result of an imported JS function

1 Answers1