Issue Generating report using Cucumber-HTML-Reporter when step name is too long

[sandeeptipparthi]

Hello Team,

Versions used - >
"cucumber-html-reporter": "^7.1.1"
@cucumber/cucumber - > 9.3.0
"@cucumber/pretty-formatter": "1.0.0"
"multiple-cucumber-html-reporter": "^3.4.0"

NPM version - 9.8.0
Node Version - v20.2.0

I am done searching for a solution on this and there is no work around as well I feel. I am unable to generate Cucumber-Html-Reporter with error throwing -

Error: ENOENT: no such file or directory, open 'test-results\screenshots\I_validate_if_a_transaction_persist_based_on_transaction_history_for_a_given_account_env_CST_ACCOUNTID_product_env_VISUALIZATION_UNIQUEUSER_PRODUCTID_usage_id_env_VISUALIZATION_USERNAME_contract_with_key_contractId_and_billing_period_env_VISUALIZATION_UNIQUEUSER_BILLINGPERIOD_and_save_if_transaction_existing_to_key_transactionsExist_and_the_count_to_transactionCount_for_future_validations_1710.png'
at Object.openSync (node:fs:592:3)
at Object.writeFileSync (node:fs:2323:35)
at C:\Users<username>\source\vscode_repos\ccp.testing.playwright.cucumber.js\node_modules\cucumber-html-reporter\lib\reporter.js:313:22
at Array.forEach ()
at C:\Users<username>\source\vscode_repos\ccp.testing.playwright.cucumber.js\node_modules\cucumber-html-reporter\lib\reporter.js:281:29
at Array.forEach ()
at C:\Users<username>\source\vscode_repos\ccp.testing.playwright.cucumber.js\node_modules\cucumber-html-reporter\lib\reporter.js:279:23
at Array.forEach ()
at C:\Users<username>\source\vscode_repos\ccp.testing.playwright.cucumber.js\node_modules\cucumber-html-reporter\lib\reporter.js:264:24
at Array.forEach () {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'test-results\screenshots\I_validate_if_a_transaction_persist_based_on_transaction_history_for_a_given_account_env_CST_ACCOUNTID_product_env_VISUALIZATION_UNIQUEUSER_PRODUCTID_usage_id_env_VISUALIZATION_USERNAME_contract_with_key_contractId_and_billing_period_env_VISUALIZATION_UNIQUEUSER_BILLINGPERIOD_and_save_if_transaction_existing_to_key_transactionsExist_and_the_count_to_transactionCount_for_future_validations_1710.png'
}

I am trimming the screenshot name already before attaching it to the world parameter as shown below -

var stepName = pickleStep.text.replace(/\s/g, "").replace(/\W/g, "");
if (stepName.length >= 200)
stepName = stepName.substring(0, 200);
const stepId = pickleStep.id;
image = await this.page?.screenshot({ path: ./test-results/screenshots/${stepName}_${stepId}.png, fullPage: true });
await this.attach(image, 'image/png');_

You can see in the above code, I am trimming the screenshot name to be max under 200 characters.

If you noticed in the above error log, it clearly is looking for some non existing screenshot name for some reason and failing to retrieve and hence throwing No file found error.

In this framework, I am also having Multiple-Cucumber-HTML-Reporter and it is also using the exact same source results to generate the report and it is not throwing any issue. Only problem is with cucumber-html-reporter.

Any help in this regard quickly, shall help.