Cypress 10+ 添加第二个插件块以与 @badeball/cypress-cucumber-preprocessor 一起工作

Question

我尝试将 @badeball/cypress-cucumber-preprocessor 插件添加到我的 Cypress 10+ 版本中。但是当我尝试使用另一个插件（比如 cy-verify-downloads）时遇到了一些奇怪的错误。在此之前，一切都按预期进行。当我尝试执行一些随机（任何）测试时，我收到以下错误：

node_modules/cy-verify-downloads/src/index.js:1:25: 错误：无法解析“路径”
node_modules/cy-verify-downloads/src/index.js:2:44: 错误：无法解析“fs”
node_modules/cy-verify-downloads/src/index.js:3:32: 错误：无法解析“crypto”

我隔离了问题，但我不确定为什么会这样。

这是 cypress.config.ts 的代码：

import { defineConfig } from 'cypress';
const { verifyDownloadTasks } = require('cy-verify-downloads');
import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
import createEsbuildPlugin from "@badeball/cypress-cucumber-preprocessor/esbuild";

export default defineConfig({
  projectId: '7emkc5',
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/report/mochawesome-report',
    overwrite: false,
    html: true,
    json: true,
    timestamp: 'dd-mm-yyyy_HH-MM-ss',
  },
  chromeWebSecurity: false,
  e2e: {
    async setupNodeEvents(on: Cypress.PluginEvents,
      config: Cypress.PluginConfigOptions): Promise<Cypress.PluginConfigOptions> {

      // Integrate the cy-verify-downloads plugin.
      on('task', verifyDownloadTasks);

      // Integrate @bahmutov/cypress-esbuild-preprocessor plugin.
      const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
      module.exports = (on, config) => {
        on('file:preprocessor', createBundler())
      };

      // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
      await addCucumberPreprocessorPlugin(on, config);
      on(
        "file:preprocessor",
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        })
      );
      // Make sure to return the config object as it might have been modified by the plugin.
      return config;

    },
    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx,feature}',
  },
})

当我添加时出现问题..

: Promise<Cypress.PluginConfigOptions>

..和...

     // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
      await addCucumberPreprocessorPlugin(on, config);
      on(
        "file:preprocessor",
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        })
      );
      // Make sure to return the config object as it might have been modified by the plugin.
      return config;

...到“setupNodeEvents”方法。

Answer 1

解决方案很简单，只需为 package.json 类中浏览器块中的所有变量添加“假”值。

在 {root}/package.json 类中添加以下代码：

  "browser": {
    "crypto": false,
    "path": false,
    "fs": false
  }

这是我班级的例子：

{
  "name": "some-name-here",
  "version": "1.0.0",
  "description": "Lorem ipsum value.",
  "main": "index.js",
  "scripts": {
    "cypress:open": "cypress open --browser chrome --e2e",
    "cypress:run": "cypress run",
    "postinstall": "patch-package"
  },
  "keywords": [],
  "author": "it is me",
  "license": "MIT",
  "dependencies": {
    "@badeball/cypress-cucumber-preprocessor": "^14.0.0",
    "cypress-file-upload": "^5.0.8",
    "jsonpath": "^1.1.1",
    "mocha": "^9.1.3",
    "mochawesome": "^7.0.1",
    "mochawesome-merge": "^4.2.1",
    "node-xlsx": "^0.17.2",
    "patch-package": "^6.4.7"
  },
  "devDependencies": {
    "@bahmutov/cypress-esbuild-preprocessor": "^2.1.5",
    "@faker-js/faker": "^6.2.0",
    "cy-verify-downloads": "^0.1.11",
    "cypress": "^11.1.0",
    "cypress-xpath": "^1.6.2",
    "esbuild": "^0.15.14",
    "typescript": "^4.9.3"
  },
  "browser": {
    "crypto": false,
    "path": false,
    "fs": false
  }
}