柏树10的Webpack编译误差和角质中的黄瓜

Question

我在此站点中看到了其他类似的问题，但是其中没有一个对我有满意的解决方案。我没有任何webpack.config.js文件，因为我们从Angular中获取默认配置。请，请参阅下面的相应图像，以更好地了解我的问题。

我的项目中的其他配置：

package.json

  "cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"json": {
  "enabled": true
},
"stepDefinitions": "**/cypress/e2e/**/*.js",
"step_definitions": "**/cypress/e2e/**/*.js"
},

cypress.config.ts

import { defineConfig } from 'cypress'
export default defineConfig({
e2e: {
// We've imported your old cypress plugins here.
// You may want to clean this up later by importing these.
setupNodeEvents(on, config) {
  return require('./cypress/plugins/index.js')(on, config)
},
specPattern: '**/e2e/**/*.feature',
"supportFile": false,
chromeWebSecurity: false
},
})

更新1： 您好@wirtuald，感谢您回复我。 我开始在一个非常复杂的角度项目上找到这个问题。因此，我从头开始创建了一个基本项目， 我仍然有相同的问题 。然后，我在此新项目的所有信息下给您：

• 我没有“插件”文件夹

• package.json上的“插件”文件夹

  版本：

   “ devDepentencies”：{
    “@badeball/Cypress-Cucumber-Preprocessor”：“^11.2.0”，
    “柏树”：“^10.2.0”
    }，，
   

• 包装上 在 “ nonglobalstepdefinitions”：是的， “ json”：{ “启用”：true }，， “ stepdefinitions”：[ “ [filepath]。{js，ts}”， “柏树/e2e/**/*。{js，ts}” 这是给出的

  }

• cypress.config.js：

    const {decteConfig} = require（“ cypress”）;
    Module.exports = decteConfig（{
    E2E：{
    Specpattern：“ **/*。功能”，
    chromewebscurity：false，
    setupnodeevents（on，config）{
    //在这里实现节点事件侦听器
    }，，
   }，，
  }）;
   

-project结构

• direct-strention-steps.js

    import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";
    Given("Access to NXSuite", () => {
    cy.visit("https://www.nxsuite.com");
    })

Answer 1

您只是缺少WebPack流程， - 开始

然后将您的首选捆绑器配置为处理功能文件。请参阅示例/有关操作方法使用浏览，Esbuild或WebPack。

webpack.ts示例在此处给出赛普拉斯 - 库伯 - 预处理/示例/webpack-ts/cypress.config.ts 。

它需要@cypress/webpack-preprocessor和ts-loader的其他安装。

import { defineConfig } from "cypress";
import * as webpack from "@cypress/webpack-preprocessor";
import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";

async function setupNodeEvents(
  on: Cypress.PluginEvents,
  config: Cypress.PluginConfigOptions
): Promise<Cypress.PluginConfigOptions> {
  await addCucumberPreprocessorPlugin(on, config);

  on(
    "file:preprocessor",
    webpack({
      webpackOptions: {
        resolve: {
          extensions: [".ts", ".js"],
        },
        module: {
          rules: [
            {
              test: /\.ts$/,
              exclude: [/node_modules/],
              use: [
                {
                  loader: "ts-loader",
                },
              ],
            },
            {
              test: /\.feature$/,
              use: [
                {
                  loader: "@badeball/cypress-cucumber-preprocessor/webpack",
                  options: config,
                },
              ],
            },
          ],
        },
      },
    })
  );

  // Make sure to return the config object as it might have been modified by the plugin.
  return config;
}

export default defineConfig({
  e2e: {
    specPattern: "**/*.feature",
    supportFile: false,
    setupNodeEvents,
  },
});

---

中

module.exports = defineConfig({

在 update1

export default defineConfig({

Answer 2

尝试安装 @cypress/webpack-preprocessor

Answer 3

问题

就我而言，这是最新版本的cypress我首先使用的

"@badeball/cypress-cucumber-preprocessor": "^11.2.0",
"cypress": "^10.2.0",

，请确保您使用@badeball/cypress-cucumber-preprocessor 解决了柏树10的一些兼容问题。参见 https> https：// github。 com/badeball/cypress-cucumber-Preprocessor/essess/722＃用于未来信息。

此外，最新版本的柏树已删除了插件文件。就我而言，将所有代码从cypress/插件/index.js内部迁移。参见 https://docs.cypress.io/guides/guides/guides/guides/guides/references/references /迁移指南＃插件 - 文件被检查

devil在详细信息中，也可能与您的插件文件本身有关。也许您可以分享，以便我们可以帮助您更好。您还可以分享哪个版本的“@badeball/cypress-cucumber-preprocessor”您

希望它能帮助您，

Answer 4

我修改了上述解决方案：

import webpack from "@cypress/webpack-preprocessor";

然后删除了.ts文件的规则，仅保留WebPack配置中的.feature规则。

那之后一切都很好

Answer 5

我有类似的问题。除了调整脚本外，我的解决方法还将节点从18降低至16.13.2