文件夹结构和依赖关系的问题

Question

我有以下初始情况：

我们的测试参考了通过国家/地区下拉列表提供多种语言版本的商店。根据国家/地区的不同，商店具有不同的功能，因此测试也不同。

我这里有两个问题。首先是文件夹结构

为了不让每个国家都有单独的回购协议，我们想按文件夹将商店的测试规范分开。但由于 PageObjects 是相同的，我只想定义它们一次，以便测试规范可以访问它们。然而，它并没有像我想象的那样工作。

这是我对 Cypress 中文件夹结构的想法：

cypress-automation
    cypress
        fixtures
        integration
           shops
              shop_de
                  sample-tests.spec.js
              shop_en
                  sample-tests.spec.js
              shop_es
                  sample-tests.spec.js
        plugins
              index.js
        support
           pageObjects
              samplePageObject.js
           index.js
           commands.js
        node_modules
        cypress.json
        package-lock.json
        package.json

但是，它不起作用，因为 Cypress 缺少 PageObjects。出现以下错误：

Error: webpack compilation error
./cypress/integration/shops/shop_en/sample-tests.spec.js

Module not found: Error: Unable to resolve '../support/pageObjects/samplePageObject.js' in 'C:\users\users\desktop\cypress-automation\cypress\integration\shops\shop_en'.

第二个问题涉及index.js 在那里我必须在 beforeEach 方法中添加一个国家开关，因为商店的 URL 是相同的并且只能通过下拉菜单更改商店。不幸的是，我不知道如何将 index.js 集成到存储文件夹中，以便 sample-tests.spec.js 访问特定的 index.js 而不是全局的。或者，我将不得不在每个 sample-tests.spec.js 中调整 beforeEach 方法，但是有这么多测试规范，我发现这是不切实际的。

有没有可能像我想象的那样？

编辑： @Fody

我完全按照你说的做了。但是，现在我得到一个错误：

PageObjects_homePage__WEBPACK_IMPORTED_MODULE_1_.HomePage is not a constructor

这是我的代码中的一个示例，我是如何包含它的：

import { HomePage } from "@PageObjects/homePage";

构造函数看起来像这样

const homePage = new HomePage();

首页Class:

class HomePage {

  testMethod() {
   testcode()
  }
}
export default HomePage;

Answer 1

对于第一部分，设置一个 webpack 别名，以便于从集成文件夹中的任何位置导入，任何级别嵌套。

按照他们的说明添加包 Cypress Webpack Preprocessor，

npm install --save-dev @cypress/webpack-preprocessor
npm install --save-dev @babel/core @babel/preset-env babel-loader webpack - 如果尚未安装

或用纱线

yarn add -D @cypress/webpack-preprocessor
yarn add -D @babel/core @babel/preset-env babel-loader webpack - 如果尚未安装

cypress/plugins.index.js

/// <reference types="cypress" />
const path = require('path');
const webpack = require('@cypress/webpack-preprocessor');

console.log('__dirname', __dirname)  // __dirname is cypress/plugins

module.exports = (on) => {
  const options = {
    webpackOptions: {             
      resolve: {                 
        alias: {                     
          '@PageObjects': path.resolve(__dirname, '../../cypress/support/pageObjects')              
        },             
      },         
    },     
    watchOptions: {},
  };

  on('file:preprocessor', webpack(options));
};

cypress/integration/shops/shop_de/sample-tests.spec.js

// resolves any level of nesting
import {MyPageObject} from '@PageObjects/samplePageObject.js'  
...

cypress/integration/shops/shop_de/bavaria/sample-tests.spec.jbs

// same import after move to sub-folder
import {MyPageObject} from '@PageObjects/samplePageObject.js'  
...

文件夹结构和依赖关系的问题

Problem with the folder structure and dependencies

javascript

cypress