dockerpackagecypresscucumberjscypress-cucumber-preprocessor

Docker image of cypress 12 is not working


I upgraded my cypress version from 8 to cypress 12.2.0.

When I run cypress suite at my local it works, But when run using docker image 12.2.0, it throw an error

    `Your configFile threw an error from: cypress.config.js

We stopped running your tests because your config file crashed.

Error: ENOENT: no such file or directory, lstat '/support'
    at Object.lstatSync (fs.js:1007:3)
    at Object.<anonymous> (/root/.cache/Cypress/12.2.0/Cypress/resources/app/node_modules/@packages/server/node_modules/graceful-fs/polyfills.js:312:16) 
    at Object.lstatSync (/root/.cache/Cypress/12.2.0/Cypress/resources/app/node_modules/@packages/server/node_modules/graceful-fs/polyfills.js:312:16)   
    at Host._follow (/node_modules/tsify/lib/Host.js:278:19)
    at Host.writeFile (/node_modules/tsify/lib/Host.js:127:29).............

My dockerFile is as below:

# FROM cypress/base:16.13.0
# FROM cypress/base:12
FROM cypress/base:12.2.0    
COPY ./cypress ./cypress
COPY ./docker-entrypoint.sh ./docker-entrypoint.sh
COPY ./cypress.config.js ./cypress.config.js
COPY ./package.json ./package.json
COPY ./package-lock.json ./package-lock.json
COPY ./docker-entrypoint.sh ./docker-entrypoint.sh
COPY ./tsconfig.json ./tsconfig.json

 RUN chmod +x docker-entrypoint.sh
RUN apt-get update && \ 
     export DEBIAN_FRONTEND=noninteractive && \
        apt-get -y install \
        libgtk2.0-0 \
        libgtk-3-0 \
        libgbm-dev \
        libnotify-dev \
        libgconf-2-4 \
        libnss3 \
        libxss1 \
        libasound2 \
        libxtst6 xauth xvfb

RUN npm install

My cypress.config.js File as below:

const { defineConfig } = require( 'cypress');
const cucumber = require('cypress-cucumber-preprocessor').default
const browserify = require('@cypress/browserify-preprocessor');


export default defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  defaultCommandTimeout: 5000,
  numTestsKeptInMemory: 0,
  viewportWidth: 1360,
  viewportHeight: 768,
  retries: 1,
     env: {
    username: 'sxxxxxxxxxx',
    password: 'xxxxxxxx',
  },
  "video": false,
  e2e: {
    chromeWebSecurity: false,

    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      const options = browserify.defaultOptions;
  
      options.browserifyOptions.plugin.unshift(['tsify']);
      on("file:preprocessor", cucumber(options));
      // on("file:preprocessor", cucumber());
      // return require('./cypress/plugins/index.js')(on, config)     
    },
    defaultCommandTimeout: 10000,
    specPattern: 'cypress/integration/**/*.feature',
    supportFile: 'cypress/support/e2e.js'
  },
})

My local node --version is v16.3.0.

To execute the test suite in docker commands as below:

docker build -t btest:cypre .   // to create docker image
docker run -it  --rm --name bContainer -v $PWD/cypress:/cypress  btest:cypre // to create container and start 
docker exec bContainer npm run  bokieLoc -- video=false    //// to run project 

My package.json file as below :

  "scripts": {
       "bokieLoc": "npx cypress-tags run --env TAGS=\"@home\" --config ",
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "ng": "^0.0.0"
      },
      "devDependencies": {
        "@cypress/browserify-preprocessor": "^3.0.1",
        "@cypress/webpack-preprocessor": "^5.9.1",
        "add": "^2.0.6",
        "cucumber-html-reporter": "^5.5.0",
        "cypress": "^12.2.0",
        "cypress-cucumber-attach-screenshots-to-failed-steps": "^1.0.0",
        "cypress-cucumber-preprocessor": "^4.2.0",
        "cypress-mochawesome-reporter": "^2.2.0",
        "cypress-xpath": "^1.6.2",
        "multiple-cucumber-html-reporter": "^1.18.0",
        "tsify": "^5.0.4",
        "typescript": "^4.5.5",
        "webpack": "^5.61.0",
        "yarn": "^1.22.10"
      },
      "cypress-cucumber-preprocessor": {
        "nonGlobalStepDefinitions": true,
        "cucumberJson": {
          "generate": true,
          "outputFolder": "cypress/cucumber_report",
          "filePrefix": "",
          "fileSuffix": ".cucumber"
        }
      }
    }

I stuck here from last 3 days, please let know where I am making a mistake.


Solution

  • Need to add return config statement in cypress.config.js

    So cypress.config.js file should be like this :

    const { defineConfig } = require('cypress');
    const createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
    const addCucumberPreprocessorPlugin =
      require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin;
    const createEsbuildPlugin =
      require('@badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin;
    
    
    
    module.exports = defineConfig({
      defaultCommandTimeout: 5000,
      numTestsKeptInMemory: 0,
      viewportWidth: 1360,
      viewportHeight: 768,
      env: {
        username: 'xxxxxxxx',
        password: 'xxxxxxxxx',
      },
      "retries": 1, 
      "video": false,
      e2e: {
         // Integrate @bahmutov/cypress-esbuild-preprocessor plugin.
        async setupNodeEvents(on, config) {
          const bundler = createBundler({
            plugins: [createEsbuildPlugin(config)],
          });
    
          // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
          on('file:preprocessor', bundler);
          await addCucumberPreprocessorPlugin(on, config);
    
          return config;
        },
        specPattern: 'cypress/e2e/**/*.feature',
      },
    });