一、提示詞

問題描述

在使用了@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
}