Cypress中cy.task执行完成后如何正确返回值？函数始终返回undefined

相关代码 #

Cypress测试文件 #

import { Given, Then } from "cypress-cucumber-preprocessor/steps";
import { quickSignIn } from "../../../support/services/commonServices";
import { storyTableViewResultColumnCheck } from "../../../support/services/calculationStoryService";


Given('Logged into the application', () => {
    quickSignIn(Cypress.env('username'), Cypress.env('password'));
});

Then('navigate to the story', () => {
    storyTableViewResultColumnCheck();
});

calculationStoryService.js文件 #

export function storyTableViewResultColumnCheck() {
        const stories =  getAllCalculationStoriesFromExcel(); // 返回undefined值
        expect(stories).not.to.be.undefined
        cy.log("method - storyTableViewResultColumnCheck",stories)
    }
    
function getAllCalculationStoriesFromExcel() {
        cy.task("getExcelData", Cypress.env("calculationRelatedStoryPath")).then((stories) => {
            console.log(stories) // 此处可正常打印所有stories数据
            return stories;
        });
    }

问题原因 #

Cypress的命令（包括cy.task）都是异步执行的。getAllCalculationStoriesFromExcel函数内部调用cy.task后，没有返回任何值（函数默认返回undefined），而then回调里的return stories只是回调函数的返回值，不会成为getAllCalculationStoriesFromExcel的返回值。因此直接将getAllCalculationStoriesFromExcel()赋值给stories时，拿到的是undefined，而then里的console.log能正常打印是因为它在异步操作完成后才执行。

解决方案 #

方案1：让函数返回Cypress命令链，在调用方使用then处理 #

修改getAllCalculationStoriesFromExcel，让它返回cy.task的执行结果：

function getAllCalculationStoriesFromExcel() {
  // 返回cy.task的链式调用，这样可以在调用方继续用then处理
  return cy.task("getExcelData", Cypress.env("calculationRelatedStoryPath"));
}

然后修改storyTableViewResultColumnCheck，通过then获取异步返回的结果：

export function storyTableViewResultColumnCheck() {
  getAllCalculationStoriesFromExcel().then(stories => {
    expect(stories).not.to.be.undefined;
    cy.log("method - storyTableViewResultColumnCheck", stories);
  });
}

方案2：使用async/await简化异步处理 #

Cypress支持async/await语法，也可以这样修改：

export async function storyTableViewResultColumnCheck() {
  const stories = await getAllCalculationStoriesFromExcel();
  expect(stories).not.to.be.undefined;
  cy.log("method - storyTableViewResultColumnCheck", stories);
}

function getAllCalculationStoriesFromExcel() {
  return cy.task("getExcelData", Cypress.env("calculationRelatedStoryPath"));
}

这两种方式都能确保在cy.task执行完成后，再获取到返回的stories数据，避免undefined的问题。

内容的提问来源于stack exchange，提问作者yasith rangana