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();

@乌扎尔·汗： 我尝试了你的解决方案，但仍然不起作用。错误消息保持不变。 IDE 似乎没有在正确的文件夹中搜索，而只在

...\node_modules\@page\loginPage.js

中搜索，这是没有意义的。 如果我输入

const loginPage = new LoginPage()

，IDE也找不到模块

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()

将相对路径解析为绝对路径，因此您需要以

./

或

../

开始第二个参数。

另外，不要在路径中使用通配符

*

，您只需要一个文件夹来替换导入语句中的别名。

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

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

Answer 2

在您的

webpack.config.js

文件中添加您想要创建别名的

resolve.alias

。它看起来像下面这样：

 resolve: {
  alias: {
    '@page': path.resolve(__dirname, '{path you want to make alias}')
  }
}

由于您使用的是cypress，因此必须更新

cypress.config.js

中的解析路径。这是我的

cypress.config.js

import { defineConfig } from 'cypress'
import webpack from '@cypress/webpack-preprocessor'
import preprocessor from '@badeball/cypress-cucumber-preprocessor'
import path from 'path'

export async function setupNodeEvents (on, config) {
  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
  await preprocessor.addCucumberPreprocessorPlugin(on, config)

  on(
    'file:preprocessor',
    webpack({
      webpackOptions: {
        resolve: {
          extensions: ['.ts', '.js', '.mjs'],
          alias: {
            '@page': path.resolve('cypress/support/pages/')
          }
        },
        module: {
          rules: [
            {
              test: /\.feature$/,
              use: [
                {
                  loader: '@badeball/cypress-cucumber-preprocessor/webpack',
                  options: config
                }
              ]
            }
          ]
        }
      }
    })
  )

  // Make sure to return the config object as it might have been modified by the plugin.
  return config
}

并通过您在

cypress.config.js

中设置的别名导入其他文件。这是我的例子：

import page from '@page/visit.js'

const visit = new page()

When('I visit duckduckgo.com', () => {
 visit.page()
})