javascript - Cypress - 如何正确等待导入的 JS 函数的结果

Question

我想编写一个 JS 库作为 3rd 方 API 的包装器。 我将 API 包装器编写为单独的文件(而不是使用 Cypress 自定义函数)，因为我相信我可以与不使用 Cypress E2E 工具的团队共享该库。

我面临的问题是“我无法让我的代码按顺序顺序执行”

从结果中我可以看到:

1. 数据未成功返回
2. 看起来“getTestPlanIdByName:20974”是最后执行的，但我希望它应该在“line 01b testPlanId:{}”之前执行

我需要帮助了解在 Cypress/Javascript 中顺序处理流程的正确方法，谢谢。

API库(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))
}

我的 Cypress 代码

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)
  });
});

Answer 1

Cypress 流程并非 100% 与标准 JS Promise 兼容 ( Wait for an own function (which returns a promise) before tests are executed )。经过不懈的测试，我决定使用 Cypress 自定义命令包装器来包装我的内部 JS 库。虽然添加额外的层可能看起来有点麻烦，但我对结果很满意。

Cypress 代码

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

Cypress 自定义命令

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

内部 JS 库

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))
  })
}