CODEWITHSUNDEEP
javascriptcypress
pontilicious
pontilicious

Reputation: 299

Problem with the folder structure and dependencies

I have the following initial situation:

Our tests refer to a store that is available in multiple languages via country dropdown. Depending on the country, the store has different features and therefore also different tests.

I have two problems here. The first is the folder structure

In order not to have a separate repo for each country, we would like to separate the test specs for the stores by folders. But since the PageObjects are identical, I would like to define them only once, so that the test specs can access them. However, it does not work as I imagine it.

Here is my idea of the folder structure in 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

However, it doesn't work because Cypress misses the PageObjects. The following error occurs:

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'.

The second problem concerns the index.js there I have to add a country switch in the beforeEach method, because the URLs of the stores are identical and the store can only be changed via dropdown. Unfortunately I don't know how to integrate the index.js into the store folder, so that the sample-tests.spec.js access a specific index.js instead of a global one. Alternatively, I would have to adjust the beforeEach method in each sample-tests.spec.js but with so many test specs I find that impractical.

is that even possible, the way I imagine it?

EDIT: @Fody

i did it exactly as you said. However, now I get an error:

PageObjects_homePage__WEBPACK_IMPORTED_MODULE_1_.HomePage is not a constructor

here is an example from my code how i included it:

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

the constructor looks like this

const homePage = new HomePage();

HomePage Class:

class HomePage {

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

Upvotes: 1

Views: 315

Answers (1)

Fody
Fody

Reputation: 32044

For part one, set up a webpack alias to make it easy to import from anywhere in the intergration folders, any level nesting.

Add the package Cypress Webpack Preprocessor, following their instructions

  • npm install --save-dev @cypress/webpack-preprocessor
  • npm install --save-dev @babel/core @babel/preset-env babel-loader webpack - if not already installed

or with yarn

  • yarn add -D @cypress/webpack-preprocessor
  • yarn add -D @babel/core @babel/preset-env babel-loader webpack - if not already installed

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'  
...

Upvotes: 2

Related Questions