Cypress：通过别名导入模块

Question

在我的项目中，我使用 cypress 和纯 JavaScript。我面临着通过别名导入模块（页面对象）而不是像../../../../folder/page.js. 我不使用typescript或react.js并且没有文件src夹/目录。

我的测试在浏览器本地或通过 docker 映像（管道）运行。

我想从此转变：

import { LoginPage } from "../../pages/loginPage.js";

像这样的事情：

import { LoginPage } from "@Pages/loginPage.js";

但我总是收到错误：

Error: Webpack Compilation Error
./cypress/e2e/accountOverview/accountOverviewPageTest.spec.js
Module not found: Error: Can't resolve 'Pages/loginPage.js' in 'C:\Users\User\automated_frontend_tests\automated_frontend_tests\cypress\e2e\accountOverview'
resolve 'Pages/loginPage.js' in 'C:\Users\User\automated_frontend_tests\automated_frontend_tests\cypress\e2e\accountOverview'
  Parsed request is a module
  using description file: C:\Users\User\automated_frontend_tests\automated_frontend_tests\package.json (relative path: ./cypress/e2e/accountOverview)
    Field 'browser' doesn't contain a valid alias configuration
    Looked for and couldn't find the file at the following paths:
[C:\Users\User\automated_frontend_tests\automated_frontend_tests\cypress\e2e\accountOverview\node_modules]
[C:\Users\User\automated_frontend_tests\automated_frontend_tests\cypress\e2e\node_modules]
[C:\Users\User\automated_frontend_tests\automated_frontend_tests\cypress\node_modules]
[C:\Users\node_modules]
[C:\node_modules]
[C:\Users\User\automated_frontend_tests\automated_frontend_tests\node_modules\Pages\loginPage.js]
[C:\Users\User\automated_frontend_tests\node_modules\Pages\loginPage.js]
[C:\Users\User\node_modules\Pages\loginPage.js]
[C:\Users\User\automated_frontend_tests\automated_frontend_tests\node_modules\Pages\loginPage.js.js]
[C:\Users\User\automated_frontend_tests\node_modules\Pages\loginPage.js.js]
[C:\Users\User\node_modules\Pages\loginPage.js.js]
[C:\Users\User\automated_frontend_tests\automated_frontend_tests\node_modules\Pages\loginPage.js.json]
[C:\Users\User\automated_frontend_tests\node_modules\Pages\loginPage.js.json]
[C:\Users\User\node_modules\Pages\loginPage.js.json]
[C:\Users\User\automated_frontend_tests\automated_frontend_tests\node_modules\Pages\loginPage.js.jsx]
[C:\Users\User\automated_frontend_tests\node_modules\Pages\loginPage.js.jsx]
[C:\Users\User\node_modules\Pages\loginPage.js.jsx]
[C:\Users\User\automated_frontend_tests\automated_frontend_tests\node_modules\Pages\loginPage.js.mjs]
[C:\Users\User\automated_frontend_tests\node_modules\Pages\loginPage.js.mjs]
[C:\Users\User\node_modules\Pages\loginPage.js.mjs]
[C:\Users\User\automated_frontend_tests\automated_frontend_tests\node_modules\Pages\loginPage.js.coffee]
[C:\Users\User\automated_frontend_tests\node_modules\Pages\loginPage.js.coffee]
[C:\Users\User\node_modules\Pages\loginPage.js.coffee]
 @ ./cypress/e2e/accountOverview/accountOverviewPageTest.spec.js 5:17-46

我尝试了几种解决方案，包括：

//webpack.config.js

module.exports = {
  resolve: {
    alias: {
      "@pages": path.resolve(__dirname, "cypress/pages/*"),
    },
  },
};



//testspec file
import { LoginPage } from "@pages/loginPage.js";
const loginPage = new LoginPage();

@Uzair Khan：我尝试了你的解决方案，但它仍然不起作用。错误消息保持不变。IDE 似乎没有在正确的文件夹中搜索，而只在...\node_modules\@page\loginPage.js其中搜索没有任何意义。如果我输入， IDE 也找不到const loginPage = new LoginPage()该模块。LoginPage()解决方案有问题。我还需要通过安装任何软件包吗NPM？

Answer 1

我认为两个答案都差不多了，这就是我的src文件：

const webpack = require('@cypress/webpack-preprocessor')
...
module.exports = defineConfig({
  ...
  e2e: {
    setupNodeEvents(on, config) {
      ...
      // @src alias
      const options = {
        webpackOptions: {             
          resolve: {                 
            alias: {                     
              '@src': path.resolve(__dirname, './src')              
            },             
          },         
        },     
        watchOptions: {},
      }
      on('file:preprocessor', webpack(options))
      ...

path.resolve()将相对路径解析为绝对路径，因此您需要以./or开头第二个参数../。

另外，不要*在路径中使用通配符，您只需要一个文件夹来替换导入语句中的别名。

如果有疑问，请检查返回的文件夹（在终端中）

module.exports = defineConfig({
  ...
  e2e: {
    setupNodeEvents(on, config) {
      const pagesFolder = path.resolve(__dirname, './cypress/pages')
      console.log('pagesFolder', pagesFolder)