使用 TypeScript 和 Cypress 10+ 安装和配置 @badeball/cypress-cucumber-preprocessor 的正确方法

Question

我正在尝试使用 TypeScript 为 Cypress 11 实现 cypress-cucumber-preprocessor，但我不确定我错过了什么。 以下是我执行的步骤：

1. 使用以下命令安装它：

npm 安装@badeball/cypress-cucumber-preprocessor

2. 这是我的问题。 我不确定如何在“cypress.config.ts”文件中实现插件。 问题是我仍在使用带有“return require('./cypress/plugins/index.js')(on, config)'的旧实现插件的解决方法。 有没有办法同时使用这两种实现（一种用于调用“index.js”文件，另一种用于添加 cypress-cucumber-preprocessor 插件）？ 我不确定如何处理它。

import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";

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: {
    // 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: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
  },
})

I am using the last version of Cypress 11.1.0 and typescript.

Answer 1

只需按照指南安装 TS https://docs.cypress.io/guides/tooling/typescript-support#Install-TypeScript

然后，将这个https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/quick-start.md粘贴到你的 cypress.config.ts 中

也安装 bahmutov lib：

npm i @bahmutov/cypress-esbuild-preprocessor    

这对我有用......祝你好运！

Answer 2

这是使用 TypeScript 将插件添加到 Cypress 10+ 的干净流程：

1. 安装 NodeJS（赛普拉斯支持的版本）。
2. 安装赛普拉斯。
3. 安装/添加TypeScript 对 Cypress 的支持。
4. 将@bahmutov/cypress-esbuild-preprocessor插件添加到项目中。
5. 将@badeball/cypress-cucumber-preprocessor插件添加到项目中。
6. 将示例设置添加到 cypress.config.ts class。

但是，现在我有一个不同的问题。 看来我无法向“setupNodeEvents”方法添加一些插件。 我在这里问一个新问题。