Cucumber Cypress 10配置文件

Question

在我将Cypress迁移到版本10之后，Cucumber预处理器停止工作。我已经找到了一些我实现的解决方案，我还安装了最新的@badeball/cypress-cucumber预处理器。

现在我被困在如何设置cypress.config.js文件，因为原来的插件文件夹是不推荐的。

在插件文件夹下的旧index.js中，我有：

const cucumber = require("cypress-cucumber-preprocessor").default;

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  on("file:preprocessor", cucumber());
...

现在插件设置应该在cypress-config.js中：

 e2e: {
    baseUrl: 'http://localhost:4200',
    specPattern: 'cypress/e2e/features',
    setupNodeEvents(on, config) {

const addCucumberPreprocessorPlugin =
  require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin;

      on('file:preprocessor',   addCucumberPreprocessorPlugin(on, config));
    }

  },

但是现在我在on('file:preprocessor', addCucumberPreprocessorPlugin());中有一个错误，即addCucumberPreprocessorPlugin不是一个函数。我知道它不是，但如何正确配置这一节黄瓜？我没有找到关于这件事的任何信息。

如果我只是删除on('file:preprocessor', addCucumberPreprocessorPlugin(on, config));，在执行特性测试文件之后，就会出现以下错误：

您可能需要一个适当的加载程序来处理此文件类型，目前还没有配置加载程序来处理此文件。

Answer 1

你可以试试这个：

1. 使用以下方法安装两个依赖项@bahmutov/cypress-esbuild-preprocessor和@esbuild-plugins/node-modules-polyfill：

npm install -D @bahmutov/cypress-esbuild-preprocessor
npm install -D @esbuild-plugins/node-modules-polyfill

1. 在您的cypress/plugin/index.js中，删除：

const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on, config) => {
  on('file:preprocessor', cucumber()) //For cypress cucumber preprocessor
}

再加上，

//For Cucumber Integration
const createEsbuildPlugin =
  require('@badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin

const createBundler = require('@bahmutov/cypress-esbuild-preprocessor')
const nodePolyfills =
  require('@esbuild-plugins/node-modules-polyfill').NodeModulesPolyfillPlugin

const addCucumberPreprocessorPlugin =
  require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin

module.exports = async (on, config) => {
  await addCucumberPreprocessorPlugin(on, config) // to allow json to be produced
  // To use esBuild for the bundler when preprocessing
  on(
    'file:preprocessor',
    createBundler({
      plugins: [nodePolyfills(), createEsbuildPlugin(config)],
    })
  )
  return config
}

1. 在您的package.json中添加：

"cypress-cucumber-preprocessor": {
  "stepDefinitions": "cypress/e2e/path-to-step-definition/**/*.{js,ts}"
}

1. 接下来，在步骤定义文件中，将import { Given, When, Then } from ‘cypress-cucumber-preprocessor/steps’替换为import { Given, When, Then, And } from “@badeball/cypress-cucumber-preprocessor”。
2. 要让柏树测试运行程序识别您的功能文件，请将specPattern in cypress.config.js文件更新为[“**/*.feature”, “cypress/e2e/**/*.cy.{js,jsx,ts,tsx}”]。

Answer 2

我使用的模式是

import { defineConfig } from "cypress";
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");

async function setupNodeEvents(on, config) { 
  await preprocessor.addCucumberPreprocessorPlugin(on, config);

  // webpack config goes here if required
 
  return config;
}

module.exports = defineConfig({
  e2e: {
    specPattern: "**/*.feature",
    supportFile: false,
    setupNodeEvents,
  },
});

您可能还需要一些webpack配置，存储库有一些示例这里。

这是另一个适合我的配置

const { defineConfig } = require("cypress");
const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild");

async function setupNodeEvents(on, config) {
  await preprocessor.addCucumberPreprocessorPlugin(on, config);

  on(
    "file:preprocessor",
    createBundler({
      plugins: [createEsbuildPlugin.default(config)],
    })
  );

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

module.exports = defineConfig({
  e2e: {
    specPattern: "**/*.feature",
    supportFile: false,
    setupNodeEvents,
  },
});

Answer 3

如果其他人找到了这个解决方案，但正在使用webpack和类型记录，我不得不对我们现有的tsconfig.json做一些调整：

"esModuleInterop": false,
"noEmit": false,

除此之外，我还需要Cypress 10转换工具和webpack/ts的@badeball/cypress-cypress-cypress文档中的例子。