当前位置： 首页 > article >正文

升级Cypress到10.8.0

article 2025/1/7 9:37:37

目录

错误信息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,
}


http://www.kler.cn/a/467389.html

相关文章：

  • PostgreSQL学习笔记（一）：PostgreSQL介绍和安装
  • 【2025年最新】OpenWrt 更换国内源的指南（图形界面版)
  • django vue3实现大文件分段续传(断点续传)
  • 数学建模入门——建模流程
  • 树莓派4b如何连接ov7670摄像头
  • PHP在做api开发中，RSA加密签名算法如何使用 ？
  • LeetCode 力扣 热题 100道（二十九）螺旋矩阵（C++）
  • 【STC库函数】Compare比较器的使用
  • 基于Java的敬老院管理系统的设计和实现【源码+文档+部署讲解】
  • Python嵌套列表的浅拷贝与深拷贝
  • Python虚拟环境管理
  • jquery实现的网页版扫雷小游戏源码
  • 从CRUD到高级功能：EF Core在.NET Core中全面应用（一）
  • STM32-笔记26-WWDG窗口看门狗
  • 基于高斯噪声模型的信号去噪——图像相加去噪的理论保证
  • 22408操作系统期末速成/复习(考研0基础上手)
  • 前端开发语言涉及到 的集合框架（Collections Framework）
  • PHP在做api开发中，RSA加密签名算法如何使用 ？
  • Fabric环境部署-Git和Node安装
  • 蛋白互作组学系列丨（四）IP-MS数据分析
  • 基础图形化界面的一个图片爬虫期末
  • 【初阶数据结构与算法】排序算法总结篇(每个小节后面有源码)（直接插入、希尔、选择、堆、冒泡、快速、归并、计数以及非递归快速、归并排序）
  • uniapp【拨打电话，发送消息】
  • 什么是TDD测试驱动开发(Test Driven Development)？
  • 【架构设计（一）】常见的Java架构模式
  • PDF阅读和编辑工具——xodo