Cypress 与 amplify-js - ReferenceError:未定义全局变量
我刚刚升级到 Cypress 10,现在收到了来自 amplify auth 库的问题,我正在使用该库将交互式用户登录到被测站点。我为此制作了一个
cy
扩展。
这是 sdk 中的一个已知问题,它使用了这个
global
变量,在 angular 中可以通过以下方式解决:
/**
* AWS Amplify - Currently, the newest versions of Angular (6+) do not provide the shim for the
* global object which was provided in previous versions.
*/
(window as any).global = window;
我尝试在 Cypress 10 的多个地方添加它:
- 在扩展文件中
- 在 cypress 配置文件中
- 在支持文件中
但没有成功。
FWIW, 扩展的要点
这是完整的堆栈跟踪:
ReferenceError The following error originated from your test code, not from Cypress.
global is not defined
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure. View stack trace Print to console at node_modules/amazon-cognito-identity-js/node_modules/buffer/index.js (http://localhost:4200/__cypress/tests?p=cypress\support\e2e.ts:12878:37) at __require2 (http://localhost:4200/__cypress/tests?p=cypress\support\e2e.ts:17:52) at eval (http://localhost:4200/__cypress/tests?p=cypress\support\e2e.ts:27843:31) at eval (http://localhost:4200/__cypress/tests?p=cypress\support\e2e.ts:33508:3) at eval () From previous event: at runScriptsFromUrls (http://localhost:4200/__cypress/runner/cypress_runner.js:165206:136) at Object.runScripts (http://localhost:4200/__cypress/runner/cypress_runner.js:165221:12) at $Cypress.onSpecWindow (http://localhost:4200/__cypress/runner/cypress_runner.js:153378:75)
我尝试将其添加到扩展文件的顶部:
let global = {};
(window as any).global = window;
/**
* amplify-js / cognito auth helper
* specific personas are logged-in and their tokens are cached to save on round-trips.
*/
import Auth, { CognitoUser } from '@aws-amplify/auth';
import Amplify from '@aws-amplify/core';
问题出在新的
esbuild
捆绑程序上,它显然是 WIP,但一些好心人已经对其进行了 polyfill。
(这一切意味着什么,我完全不知道)
我之前曾使用新的 npm
overrides
指令解决了这个问题:
"overrides": {
"@aws-amplify/auth": {
"amazon-cognito-identity-js": {
"buffer": "6.0.3"
}
}
}
我不喜欢它,因为它现在和将来都有潜在的副作用。
Polyfilling 节点是更好的方法, 在这里进行了更详细的讨论 ,但简而言之,更新 Cypress 配置如下:
export default defineConfig({
e2e: {
async setupNodeEvents(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions): Promise<Cypress.PluginConfigOptions> {
// This is required for the preprocessor to be able to generate JSON reports after each run, and more,
await addCucumberPreprocessorPlugin(on, config);
const bundler = createBundler({
plugins: [
NodeModulesPolyfills(),
GlobalsPolyfills({
process: true,
buffer: true
}),
createEsbuildPlugin(config)
]
});
on('file:preprocessor', bundler);
我在运行 cypress 测试时遇到了两个问题,我需要下载 csv 或 excel 文件并读取这些文件并验证标题和行数 - 我实现了 https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__download 中提到的解决方案,但在基于路径和 neat-csv 导入运行测试时遇到了问题,即未定义进程或未定义缓冲区。我能够基于上述解决方案解决上述问题,但略有变化..
npm install @esbuild-plugins/node-globals-polyfill
npm install @esbuild-plugins/node-modules-polyfill
在 cypress.config.js 下
const { NodeGlobalsPolyfillPlugin } = require("@esbuild-plugins/node-globals-polyfill")
const { NodeModulesPolyfillPlugin } = require("@esbuild-plugins/node-modules-polyfill")
e2e 部分将
experimentalSessionAndOrigin: true,
async setupNodeEvents(on, config ){
const bundler = createBundler({
plugins: [
NodeModulesPolyfillPlugin(),
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true
}),
createEsbuildPlugin(config)
],
});
on("file:preprocessor", bundler);
await addCucumberPreprocessorPlugin(on, config);
return config;
},
specPattern: "cypress/e2e/features/**/*.feature",
chromeWebSecurity: false,
}```