升级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' ✔

错误信息6： Missing class properties transform✔

错误信息7：TypeError Cannot read properties of undefined (reading 'tags')✔

错误信息8：TypeError Cannot read properties of undefined (reading 'getElement')✔

升级cucumber插件

1.升级cypress-cucumber-preprocessor@4.0.0到@badeball/cypress-cucumber-preprocessor@21.0.3

2.升级@cypress/webpack-preprocessor 5.5.0 到5.12.0

错误信息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.
解决方案：增加plugins: ['@babel/plugin-proposal-class-properties']配置到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: /\.jsx?$/,exclude: [/node_modules/],use: [{loader: 'babel-loader',options: {presets: ['@babel/preset-env'],plugins: ['@babel/plugin-proposal-class-properties'],},},],},],},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'),},},
};

错误信息7：TypeError Cannot read properties of undefined (reading 'tags')✔

原因分析：Cypress 9.7.0升级到Cypress 10.8.0后，window.testState返回的对象发生变化，原来是window.testState.currentScenario.tags

升级后变成window.testState.pickle.tags

解决方案：将window.testState.currentScenario.tags改成window.testState.pickle.tags

错误信息8：TypeError Cannot read properties of undefined (reading 'getElement')✔

原因分析：在解决错误信息5时，webpack.config.js中加入了 resolve.alias配置引入以下问题

解决方案：

方式一：由于pages/index.js使用了默认导出，而不是命名导出，在导入时不能使用 import {} from ‘@pages’格式，只能使用import pages from '@pages‘； const {PortalPage, BackendPage} = pages这种方式

方式二：修改pages/index.js为命名导出方式（由于CommonPage中声明构造方法将commonpage的selector与其它page进行合并，因此必须实例化调用一次构造方法）

import CommonPage from './_common/common_page';
import PortalPage from './portal_page/portal_page';
import BackendPage from './backend_page/backend_page';
import PLandingPage from './portal_landing/p_landing_page';
import PSettingPage from './setting_page/p_setting_page';
import PCourseDetailPage from './course_detail_page/p_course_detail_page';
import PMyCoursePage from './my_course_page/p_my_course_page';const CommonPageObj = new CommonPage();
export {CommonPageObj as CommonPage,PortalPage,BackendPage,PLandingPage,PCourseDetailPage,PMyCoursePage,PSettingPage,
}