[Bug]: Unable to set up folder path other than cypress/screenshots/ ...

[MadSandwich]

Describe the Bug

With default settings only, screenshots are saved to:

With property - imagesPath: './'

Steps to reproduce

Package.json

{
    "name": "cy-cypress",
    "type": "module",
    "engines": {
        "node": ">=18.16.0"
    },
    "dependencies": {
        "@badeball/cypress-cucumber-preprocessor": "^18.0.1",
        "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
        "@shelex/cypress-allure-plugin": "^2.40.0",
        "cypress": "^12.15.0"
    },
    "devDependencies": {
        "@frsource/cypress-plugin-visual-regression-diff": "^3.3.10",
        "cypress-plugin-api": "^2.11.1",
        "eslint": "^8.43.0",
        "eslint-config-prettier": "^8.8.0",
        "eslint-plugin-prettier": "^4.2.1",
        "husky": "^8.0.3",
        "lint-staged": "^13.2.2",
        "prettier": "^2.8.8",
        "puppeteer-core": "^20.7.3"
    }
}

Was trying to run via cypress open and cypress run, in both cases I have issues with setting up a directory.

Expected behavior

Directory path set up with 'imagesDir' or 'imagesPath' should be interpreted in the right way.

Additional context

No response

Package version

latest

Device

PC

OS and version

Windows 11

Browser and version

Chrome (latest)

Node version

Node 21

I can work on it by myself

• Yes
• No

Code of Conduct

• I agree to follow this project's Code of Conduct

[MadSandwich]

@FRSgit could you please take a look on it? Unfortunately, I can't share the repo. If you need more details or something, let me know. Thanks for help in advance.

[FRSgit]

Hey @MadSandwich!

Sure, sorry for the late response.

I'll need a bit more details here:

• can you share your cypress.config configuration file?
• is that issue reproducible in any of the examples contained in this repo?

[VitaliLebedzeu]

Hi @FRSgit !
Sure,

1. cypress.config file is:

export default defineConfig({
    e2e: {
        baseUrl: ENVIRONMENT.baseUrl,
        specPattern: 'cypress/e2e/**/*.feature',
        experimentalRunAllSpecs: true,
        chromeWebSecurity: false,
        reporter: require.resolve('@badeball/cypress-cucumber-preprocessor/pretty-reporter'),
        async setupNodeEvents(on, config) {
            initPlugin(on, config)
            await preprocessor.addCucumberPreprocessorPlugin(on, config)
            on(
                'file:preprocessor',
                createBundler({
                    plugins: [createEsbuildPlugin.default(config)],
                })
            )
            on('task', {
                resolvePath(...args) {
                    return path.resolve(args.toString())
                },
            })
            allureWriter(on, config)
            return config
        },
        env: {
            env: ENVIRONMENT,
            pluginVisualRegressionImagesDir: './baseline/',
            //Cucumber
            filterSpecs: true,
            omitFiltered: true,
            //Reporters
            // Cucumber reporter configurations
            messagesEnabled: true,
            messagesOutput: './report_results/cucumber-messages.json',
            jsonEnabled: true,
            jsonOutput: './report_results/cucumber-report.json',
            htmlEnabled: true,
            htmlOutput: './report_results/cucumber-report.html',
            prettyEnabled: true,
            // Allure reporter configurations
            allure: true,
            allureReuseAfterSpec: true,
            allureResultsPath: './report_results/allure-results',
            allureLogCypress: true,
            allureLogGherkin: true,
        },
    },
    viewportWidth: 1920,
    viewportHeight: 1080,
    video: false,
    includeShadowDom: true,
    retries: { runMode: 2, openMode: 0 },
    trashAssetsBeforeRuns: true,
    experimentalMemoryManagement: true,
})

2. Unfortunately, we don't use this approach in any different cases.

[kuldea-paulo]

@VitaliLebedzeu / @MadSandwich

Same as you, I'm also using @badeball/cypress-cucumber-preprocessor and was also having the same problem. The images were always placed inside cypress/screenshots/ folder.
Looking at your cypress.config, you have the same "problem" I had. Try changing the order of

            initPlugin(on, config)
            await preprocessor.addCucumberPreprocessorPlugin(on, config)

to

            await preprocessor.addCucumberPreprocessorPlugin(on, config)
            initPlugin(on, config)

This partially solved the problem on my installation. But I can't use the images scaled to the viewport size...

The problem exists because of a cypress limitation, where only a single event handler can exist for each type of event. Because of that, there are conflicts between the current plugin and @badeball/cypress-cucumber-preprocessor.

So, this problem is not a bug on the @frsource/cypress-plugin-visual-regression-diff plugin but, instead, is a result of the cypress limitation.

See https://github.com/badeball/cypress-cucumber-preprocessor/blob/master/docs/event-handlers.md for a clear explanation.

[VitaliLebedzeu]

@kuldea-paulo thanks a lot. It works now for me.
About "can't use the images scaled to the viewport size..." try to use cypress-on-fix . It helps to us with similar problems.

[kuldea-paulo]

@VitaliLebedzeu
thank you for the tip. I will definitely try it!!

[VitaliLebedzeu]

Unfortunately, it doesn't work as I need.
The problem is that plugin puts all snapshots (baseline and diffs) in one place determined the "imagesPath" variable and duplicate this information in the "cypress/screenshots" dir. Also, I can't determine path for diffs separately.