Docker image of cypress 12 is not working - docker

Question

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.

Answer 1

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',
},
});