Github Copilot协助解决cucumber插件不支持async/await

一、提示词

问题描述

在使用了@badeball/cypress-cucumber-preprocessor插件后，存在不支持nodejs原生的promise和async/await语法问题

执行用例命令

npx cypress run --env configFile=mhesi-staging,TAGS="@API005" --spec "cypress/integration/AL/API/*.feature"

报错信息

Error: Cucumber preprocessor detected that you returned a native promise from a function handler, this is not supported. Using async / await is generally speaking not supported when using Cypress, period, preprocessor or not.
      at runStepWithLogGroup (https://thai-portal.staging.mhesi-skill.org/__cypress/tests?p=cypress\integration\AL\API\api.feature:17265:17)
      at Context.eval (https://thai-portal.staging.mhesi-skill.org/__cypress/tests?p=cypress\integration\AL\API\api.feature:17751:58)

约束条件 

1.在Cypress 10.0.0+框架下的自动化测试项目中，使用了大量的async/await语法，修复工作量比较大，需要维持这种使用

2.cypress-cucumber-preprocessor插件不支持Cypress 10.0.0+版本，因此替换成@badeball/cypress-cucumber-preprocessor插件，请不要建议我替换成cypress-cucumber-preprocessor插件

3.在./cypress/api和./cypress/integration/_utils目录下的js文件，需要兼容在nodejs和browser环境中运行，因此涉及fs,path和crypto等模块的调用，代码需要考虑兼容两个环境，最好在统一的文件中封装处理好后，便于项目全局可调用

任务

提供一个解决方案，在Cypress 10.0.0+版本中，能够支持async/await的原生promise语法，使用@badeball/cypress-cucumber-preprocessor插件的解决方案，或者其它cucumber插件的结局方案均可

方案验证方法

命令npx cypress run --env configFile=mhesi-staging,TAGS="@API005" --spec "cypress/integration/AL/API/*.feature"能够执行成功

二、AI给的解决方案

1.编写一个wrapAsync函数，兼容cucumber preprocessor

cypress/support/async-wrapper.js文件

/*** Utility to wrap async functions for Cypress cucumber compatibility* Converts async/await to Cypress chainable commands*//*** Wraps an async function to make it compatible with Cypress cucumber preprocessor* @param {Function} asyncFn - The async function to wrap* @returns {Function} - A function that returns a Cypress chainable*/
export function wrapAsync(asyncFn) {return function(...args) {return cy.wrap(null).then(() => {return asyncFn.apply(this, args);});};
}/*** Wraps an async function and handles any errors appropriately* @param {Function} asyncFn - The async function to wrap* @returns {Function} - A function that returns a Cypress chainable with error handling*/
export function wrapAsyncWithErrorHandling(asyncFn) {return function(...args) {return cy.wrap(null).then(async () => {try {const result = await asyncFn.apply(this, args);return result;} catch (error) {cy.log(`Error in async function: ${error.message}`);throw error;}});};
}/*** Helper to execute multiple async operations in sequence* @param {Array} asyncOperations - Array of async functions to execute* @returns {Function} - A function that returns a Cypress chainable*/
export function executeAsyncSequence(asyncOperations) {return cy.wrap(null).then(async () => {const results = [];for (const operation of asyncOperations) {const result = await operation();results.push(result);}return results;});
}/*** Helper to execute async operation with retry logic* @param {Function} asyncFn - The async function to retry* @param {number} maxRetries - Maximum number of retries* @param {number} delay - Delay between retries in ms* @returns {Function} - A function that returns a Cypress chainable*/
export function wrapAsyncWithRetry(asyncFn, maxRetries = 3, delay = 1000) {return function(...args) {return cy.wrap(null).then(async () => {let lastError;for (let i = 0; i <= maxRetries; i++) {try {return await asyncFn.apply(this, args);} catch (error) {lastError = error;if (i < maxRetries) {cy.log(`Retry ${i + 1}/${maxRetries} after error: ${error.message}`);await new Promise(resolve => setTimeout(resolve, delay));}}}throw lastError;});};
}

2.提供一个跨环境的适配层，以满足nodejs和browser两个运行环境

cypress/support/cross-env-utils.js

/*** Cross-environment compatibility layer for Node.js modules* Works in both Node.js and browser environments*/let fs, path, crypto;// Detect environment and import appropriate modules
if (typeof window === 'undefined') {// Node.js environmenttry {fs = require('fs-extra');path = require('path');crypto = require('crypto');} catch (e) {// Fallback if modules are not availableconsole.warn('Node.js modules not available:', e.message);}
} else {// Browser environment - use polyfills or mocksfs = require('../mocks/fs-mock');path = require('path-browserify');crypto = require('crypto-browserify');
}/*** File system operations compatible with both environments*/
export const FileSystem = {readFileSync: (filePath, encoding = 'utf8') => {if (typeof window === 'undefined' && fs) {return fs.readFileSync(filePath, encoding);}// Browser fallback - could use cy.readFile or fetchthrow new Error('File system operations not supported in browser environment');},writeFileSync: (filePath, data, encoding = 'utf8') => {if (typeof window === 'undefined' && fs) {return fs.writeFileSync(filePath, data, encoding);}throw new Error('File system operations not supported in browser environment');},existsSync: (filePath) => {if (typeof window === 'undefined' && fs) {return fs.existsSync(filePath);}return false;},readJsonSync: (filePath) => {if (typeof window === 'undefined' && fs && fs.readJSONSync) {return fs.readJSONSync(filePath);}// Fallback for browserconst content = FileSystem.readFileSync(filePath);return JSON.parse(content);}
};/*** Path operations compatible with both environments*/
export const PathUtils = {join: (...paths) => {if (path && path.join) {return path.join(...paths);}// Simple fallback for browserreturn paths.join('/').replace(/\/+/g, '/');},resolve: (...paths) => {if (path && path.resolve) {return path.resolve(...paths);}// Simple fallback for browserreturn PathUtils.join(...paths);},dirname: (filePath) => {if (path && path.dirname) {return path.dirname(filePath);}// Simple fallbackreturn filePath.split('/').slice(0, -1).join('/') || '/';},basename: (filePath, ext) => {if (path && path.basename) {return path.basename(filePath, ext);}// Simple fallbackconst name = filePath.split('/').pop() || '';return ext && name.endsWith(ext) ? name.slice(0, -ext.length) : name;}
};/*** Crypto operations compatible with both environments*/
export const CryptoUtils = {createHash: (algorithm) => {if (crypto && crypto.createHash) {return crypto.createHash(algorithm);}throw new Error('Crypto operations not available in this environment');},randomBytes: (size) => {if (crypto && crypto.randomBytes) {return crypto.randomBytes(size);}// Browser fallback using Web Crypto APIif (typeof window !== 'undefined' && window.crypto && window.crypto.getRandomValues) {const buffer = new Uint8Array(size);window.crypto.getRandomValues(buffer);return buffer;}throw new Error('Random bytes generation not available in this environment');},createUuid: () => {if (crypto && crypto.randomUUID) {return crypto.randomUUID();}// Fallback UUID v4 generatorreturn 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {const r = Math.random() * 16 | 0;const v = c === 'x' ? r : (r & 0x3 | 0x8);return v.toString(16);});}
};/*** Environment detection utilities*/
export const Environment = {isNode: () => typeof window === 'undefined',isBrowser: () => typeof window !== 'undefined',isCypress: () => typeof window !== 'undefined' && typeof window.Cypress !== 'undefined'
};/*** Async operation wrapper for cross-environment compatibility*/
export const AsyncUtils = {delay: (ms) => new Promise(resolve => setTimeout(resolve, ms)),retryAsync: async (fn, maxRetries = 3, delay = 1000) => {let lastError;for (let i = 0; i <= maxRetries; i++) {try {return await fn();} catch (error) {lastError = error;if (i < maxRetries) {await AsyncUtils.delay(delay);}}}throw lastError;}
};// Export everything as default for easy importing
export default {FileSystem,PathUtils,CryptoUtils,Environment,AsyncUtils
};

.cypress/mocks/fs-mock.js

/*** Mock fs module for browser environment*/const fsMock = {readFileSync: (filePath, encoding = 'utf8') => {throw new Error('File system operations not supported in browser environment. Use cy.readFile() instead.');},writeFileSync: (filePath, data, encoding = 'utf8') => {throw new Error('File system operations not supported in browser environment.');},existsSync: (filePath) => {return false;},readJSONSync: (filePath) => {throw new Error('File system operations not supported in browser environment. Use cy.fixture() instead.');},ensureDirSync: (dirPath) => {// No-op in browser},copySync: (src, dest) => {throw new Error('File system operations not supported in browser environment.');}
};module.exports = fsMock;

3.更新Cucumber测试步骤

原步骤

//添加培训到频道
When(/^user blinds Train item "([^"]*)" in Library "([^"]*)" to Channel "([^"]*)"$/, (trainName, libraryName, channelName) => {libraryName = cy.data(libraryName);trainName = cy.data(trainName);channelName = cy.data(channelName);cy.wrap(Library.queryLibrary(libraryName)).then((libraryId) => {cy.wrap(Channel.queryChannel(channelName)).then((channelId) => {cy.wrap(Channel.addTrain(channelId, "Recommended by window", libraryId, trainName)).then(() => {cy.wrap(Channel.saveChannel(channelId));});});});
});

修改后的步骤（代码可读性和可维护性提升）

import { wrapAsync, wrapAsyncWithErrorHandling } from '../../../support/async-wrapper';//添加培训到频道
When(/^user blinds Train item "([^"]*)" in Library "([^"]*)" to Channel "([^"]*)"$/, wrapAsync(async (trainName, libraryName, channelName) => {libraryName = cy.data(libraryName);trainName = cy.data(trainName);channelName = cy.data(channelName);const libraryId = await Library.queryLibrary(libraryName);const channelId = await Channel.queryChannel(channelName);await Channel.addTrain(channelId, "Recommended by window", libraryId, trainName);await Channel.saveChannel(channelId);
}));

 4.更新Cucumber插件配置

移除package.json中的cucumber插件配置部分

  "cypress-cucumber-preprocessor": {"nonGlobalStepDefinitions": true,"stepDefinitions": ["cypress/integration/**/*.js","cypress/integration/**/**/*.js"]},

根目录下创建.cypress-cucumber-preprocessorrc文件

{"stepDefinitions": "cypress/integration/**/*.js","filterSpecs": true,"omitFiltered": true,"nonGlobalStepDefinitions": false
}