升级Cypress到10.8.0

错误信息1：Error: Webpack Compilation Error✔

代码

错误信息2：执行测试后，异常退出，没有报错✔

错误信息3：执行测试后，报Webpack Compilation Error， webpack找不到✔

错误信息4：Step implementation missing ✔

错误信息5： Module not found: Error: Can't resolve '@utils/uc'

错误信息1：Error: Webpack Compilation Error✔

./cypress/integration/AL/api.feature
Module build failed (from ./node_modules/@badeball/cypress-cucumber-preprocessor/dist/subpath-entrypoints/webpack.js):
TypeError: The "from" argument must be of type string. Received undefined

代码

setupNodeEvents.js

const { addCucumberPreprocessorPlugin } = require("@badeball/cypress-cucumber-preprocessor");
const webpackPreprocessor = require('@cypress/webpack-preprocessor');

    const webpackOptions = {
        webpackOptions: {
            ...require('./webpack.config'),
            module: {
                rules: [
                    ...require('./webpack.config').module.rules,
                    {
                        test: /\.feature$/,
                        use: [
                            {
                                loader: require.resolve('@badeball/cypress-cucumber-preprocessor/webpack'),
                                options: {
                                    stepDefinitions: 'cypress/integration',
                                    config,
                                },
                            },
                        ],
                    },
                ],
            },
        },
        watchOptions: {},
    };

await addCucumberPreprocessorPlugin(on, config);
on('file:preprocessor', webpackPreprocessor(webpackOptions));

webpack.config.js

const webpack = require('webpack');
const path = require('path');

const definePlugin = new webpack.DefinePlugin({
  __REPORTING__: JSON.stringify(JSON.parse(process.env.REPORTING || 'false')),
});

module.exports = {
  mode: 'development',
  plugins: [definePlugin],
  module: {
    rules: [
      {
        test: /\.yml$/,
        use: 'js-yaml-loader',
      },
      {
        test: /\.txt$/,
        use: 'raw-loader',
      },
      {
        test: /\.js?$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },
      {
        test: /\.feature$/,
        use: [
          {
            loader: require.resolve('@badeball/cypress-cucumber-preprocessor/webpack'),
            options: {
              stepDefinitions: 'cypress/integration',
            },
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      '@config': path.resolve(__dirname, 'cypress/config'),
      '@common': path.resolve(__dirname, 'cypress/integration/_common/_common'),
      '@integration': path.resolve(__dirname, 'cypress/integration'),
      '@pages': path.resolve(__dirname, 'cypress/pages'),
      '@utils': path.resolve(__dirname, 'cypress/integration/_utils'),
    },
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

解决方案：错误的配置导致@badeball/cypressp-cucumber-preprocessor/dist/template.js文件以下代码在调用config时，引用projectRoot不存在

const relativeUri = path_1.default.relative(configuration.projectRoot, uri);

const webpackOptions = {
        webpackOptions: {
            ...require('./webpack.config'),
            module: {
                rules: [
                    ...require('./webpack.config').module.rules,
                    {
                        test: /\.feature$/,
                        use: [
                            {
                                loader: require.resolve('@badeball/cypress-cucumber-preprocessor/webpack'),
                                options: config,
                            },
                        ],
                    },
                ],
            },
        },
        watchOptions: {},
    };

仅config对象传给options时，该问题得到解决

错误信息2：执行测试后，异常退出，没有报错✔

解决方案：更新CI_BUILD_ID的值，保持每次执行唯一

错误信息3：执行测试后，报Webpack Compilation Error， webpack找不到✔

Error: Webpack Compilation Error
multi ./cypress/integration/AA/Join/Join.feature
Module not found: Error: Can't resolve '@badeball/cypress-cucumber-preprocessor/webpack' in 'F:\github\llp-cypress'
resolve '@badeball/cypress-cucumber-preprocessor/webpack' in 'F:\github\llp-cypress'
Parsed request is a module
using description file: F:\github\llp-cypress\package.json (relative path: .)
Looked for and couldn't find the file at the following paths:
[F:\github\node_modules]
[F:\node_modules]
[F:\github\llp-cypress\node_modules\@badeball\cypress-cucumber-preprocessor\webpack]
[F:\github\llp-cypress\node_modules\@badeball\cypress-cucumber-preprocessor\webpack.js]
[F:\github\llp-cypress\node_modules\@badeball\cypress-cucumber-preprocessor\webpack.json]

at handle (F:\github\llp-cypress\node_modules\@cypress\webpack-preprocessor\dist\index.js:180:23)
at finalCallback (F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:257:39)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:306:14
at AsyncSeriesHook.eval [as callAsync] (eval at create (F:\github\llp-cypress\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (F:\github\llp-cypress\node_modules\tapable\lib\Hook.js:154:20)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:304:22
at Compiler.emitRecords (F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:499:39)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:298:10
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:485:14
at AsyncSeriesHook.eval [as callAsync] (eval at create (F:\github\llp-cypress\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (F:\github\llp-cypress\node_modules\tapable\lib\Hook.js:154:20)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:482:27
at F:\github\llp-cypress\node_modules\neo-async\async.js:2818:7
at done (F:\github\llp-cypress\node_modules\neo-async\async.js:3522:9)
at AsyncSeriesHook.eval [as callAsync] (eval at create (F:\github\llp-cypress\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (F:\github\llp-cypress\node_modules\tapable\lib\Hook.js:154:20)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:464:33
at C:\Users\Administrator\AppData\Local\Cypress\Cache\10.8.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:143:16
at C:\Users\Administrator\AppData\Local\Cypress\Cache\10.8.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:143:16
at C:\Users\Administrator\AppData\Local\Cypress\Cache\10.8.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:61:14
at FSReqCallback.oncomplete (node:fs:187:23)

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

解决方案：

1.当前使用@cypress/webpack-preprocessor 5.5.0版本（2020-11-30）过旧，可能与cypress 10.8.0（2022-09-13）不兼容，升级到@cypress/webpack-preprocessor 5.12.0后，该报错消失，但是出现错误信息1

2.需要传入config给webpackOptions，即

const webpackOptions = {
        webpackOptions: {
            ...require('./webpack.config'),
            module: {
                rules: [
                    ...require('./webpack.config').module.rules,
                    {
                        test: /\.feature$/,
                        use: [
                            {
                                loader: require.resolve('@badeball/cypress-cucumber-preprocessor/webpack'),
                                options: {
                                    stepDefinitions: 'cypress/integration',
                                    config,
                                },
                            },
                        ],
                    },
                ],
            },
        },
        watchOptions: {},
    };

错误信息4：Step implementation missing ✔

1) Verify existing user
user logs in portal by UC:
Error:
Step implementation missing for ""LOGIN_USER:3:EMAIL" has logged in Portal".

We tried searching for files containing step definitions using the following search pattern templates:

- ./cypress/integration

These templates resolved to the following search patterns:

- ./cypress/integration

These patterns matched **no files** containing step definitions. This almost certainly means that you have misconfigured `stepDefinitions`.

You can implement it using the suggestion(s) below.

Given("{string} has logged in Portal", function (string) {
return "pending";
});

解决方案：将以下配置更新到package.json

"cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true,
    "stepDefinitions": "cypress/integration/**/*.js"
  },

错误信息5： Module not found: Error: Can't resolve '@utils/uc' ✔

./cypress/integration/_common/_common/_common_actions.js
Module not found: Error: Can't resolve '@utils/uc' in 'F:\github\llp-cypress\cypress\integration\_common\_common'
resolve '@utils/uc' in 'F:\github\llp-cypress\cypress\integration\_common\_common'
Parsed request is a module
using description file: F:\github\llp-cypress\package.json (relative path: ./cypress/integration/_common/_common)
Field 'browser' doesn't contain a valid alias configuration
Looked for and couldn't find the file at the following paths:
[F:\github\llp-cypress\cypress\integration\_common\_common\node_modules]
[F:\github\llp-cypress\cypress\integration\_common\node_modules]
[F:\github\llp-cypress\cypress\integration\node_modules]
[F:\github\llp-cypress\cypress\node_modules]
[F:\github\node_modules]
[F:\node_modules]
[F:\github\llp-cypress\node_modules\@utils\uc]
[F:\github\llp-cypress\node_modules\@utils\uc.ts]
[F:\github\llp-cypress\node_modules\@utils\uc.js]
@ ./cypress/integration/_common/_common/_common_actions.js 2:0-32
@ ./cypress/integration/AA/login/demo.feature
@ multi ./cypress/integration/AA/login/demo.feature
at handle (F:\github\llp-cypress\node_modules\@cypress\webpack-preprocessor\dist\index.js:180:23)
at finalCallback (F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:257:39)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:306:14
at AsyncSeriesHook.eval [as callAsync] (eval at create (F:\github\llp-cypress\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (F:\github\llp-cypress\node_modules\tapable\lib\Hook.js:154:20)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:304:22
at Compiler.emitRecords (F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:499:39)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:298:10
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:485:14
at AsyncSeriesHook.eval [as callAsync] (eval at create (F:\github\llp-cypress\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (F:\github\llp-cypress\node_modules\tapable\lib\Hook.js:154:20)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:482:27
at F:\github\llp-cypress\node_modules\neo-async\async.js:2818:7
at done (F:\github\llp-cypress\node_modules\neo-async\async.js:3522:9)
at AsyncSeriesHook.eval [as callAsync] (eval at create (F:\github\llp-cypress\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (F:\github\llp-cypress\node_modules\tapable\lib\Hook.js:154:20)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:464:33
at C:\Users\Administrator\AppData\Local\Cypress\Cache\10.8.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:143:16
at C:\Users\Administrator\AppData\Local\Cypress\Cache\10.8.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:143:16
at C:\Users\Administrator\AppData\Local\Cypress\Cache\10.8.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:61:14
at FSReqCallback.oncomplete (node:fs:187:23)

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.
原因分析：webpack未引入别名配置

解决方案：在webpack.config.js中加入resolve.alias的配置，完整配置如下

const webpack = require('webpack');
const path = require('path');

const definePlugin = new webpack.DefinePlugin({
  __REPORTING__: JSON.stringify(JSON.parse(process.env.REPORTING || 'false')),
});

module.exports = {
  mode: 'development',
  plugins: [definePlugin],
  module: {
    rules: [
      {
        test: /\.yml$/,
        use: 'js-yaml-loader',
      },
      {
        test: /\.txt$/,
        use: 'raw-loader',
      },
      {
        test: /\.jsx?$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".js"],
    alias: {
      '@config': path.resolve(__dirname, 'cypress/config'),
      '@common': path.resolve(__dirname, 'cypress/integration/_common/_common'),
      '@integration': path.resolve(__dirname, 'cypress/integration'),
      '@pages': path.resolve(__dirname, 'cypress/pages'),
      '@utils': path.resolve(__dirname, 'cypress/integration/_utils'),
    },
  },
};

错误信息6： Missing class properties transform

Error: Webpack Compilation Error
./cypress/pages/_common/common_page.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: F:\github\llp-cypress\cypress\pages\_common\common_page.js: Missing class properties transform.
4 | // The abstract base page class
5 | class CommonPage {
> 6 | static commonSelectors = commonSelectors;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
7 |
8 | visit() {
9 | throw new Error('Not Implemented');
@ ./cypress/pages/index.js 1:0-47 76:18-28
@ ./cypress/integration/AA/login/login_steps.js
@ ./cypress/integration/AA/login/login.feature
at handle (F:\github\llp-cypress\node_modules\@cypress\webpack-preprocessor\dist\index.js:180:23)
at finalCallback (F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:257:39)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:306:14
at AsyncSeriesHook.eval [as callAsync] (eval at create (F:\github\llp-cypress\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (F:\github\llp-cypress\node_modules\tapable\lib\Hook.js:154:20)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:304:22
at Compiler.emitRecords (F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:499:39)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:298:10
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:485:14
at AsyncSeriesHook.eval [as callAsync] (eval at create (F:\github\llp-cypress\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (F:\github\llp-cypress\node_modules\tapable\lib\Hook.js:154:20)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:482:27
at F:\github\llp-cypress\node_modules\neo-async\async.js:2818:7
at done (F:\github\llp-cypress\node_modules\neo-async\async.js:3522:9)
at AsyncSeriesHook.eval [as callAsync] (eval at create (F:\github\llp-cypress\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (F:\github\llp-cypress\node_modules\tapable\lib\Hook.js:154:20)
at F:\github\llp-cypress\node_modules\webpack\lib\Compiler.js:464:33
at C:\Users\Administrator\AppData\Local\Cypress\Cache\10.8.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:143:16
at C:\Users\Administrator\AppData\Local\Cypress\Cache\10.8.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:143:16
at C:\Users\Administrator\AppData\Local\Cypress\Cache\10.8.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:61:14
at FSReqCallback.oncomplete (node:fs:187:23)