升级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)

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.