haim-io / cypress-image-diff

Visual regression test with cypress
MIT License
251 stars 62 forks source link

Unable to update folder locations #205

Closed JonathanSTH closed 6 months ago

JonathanSTH commented 8 months ago

Attempting to configure the location of the folders is not working.

created cypress-image-diff.config.js in the root of the project with this code:


export default defineConfig({
    baseDir: '../../visualTesting',
    ROOT_DIR: './',
    reportJsonFilePath: '../../visualTesting',
    // SCREENSHOTS_DIR: '././visual-screenshots',
    FAILURE_THRESHOLD: 0.01,
    // JSON_REPORT: {
    //  FILENAME: 'vis_report',
    //  OVERWRITE: false
    // }
    reportJsonDir: '../../visualTesting'
    // outputDir: './visualTesting',
    // autoOpen: true
});

module.exports = config;

cypress.config.ts file contains:

const getCompareSnapshotsPlugin = require('cypress-image-diff-js/plugin');

and then it has this code after:

    e2e: {
        specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
        setupNodeEvents(on, config) {

            // visual testing
            getCompareSnapshotsPlugin(on, config);
return config;

the e2e.ts file has this code:

import compareSnapshotCommand from 'cypress-image-diff-js';
compareSnapshotCommand();

after(() => {
    cy.task('generateReport');
});

the folders and files get added to the config folder under root > cypress > config

Code_QuZ2dFWRj1

kien-ht commented 8 months ago

@JonathanSTH Hi, I assume that you're trying to configure your custom report folders. Here the link to a typescript example project you can reference to.

JonathanSTH commented 8 months ago

Thanks for the reply. Yes, I've looked at this documentation.

Specifically for the config file: https://github.com/kien-ht/cypress-image-diff-html-report/blob/main/examples/typescript/cypress-image-diff.config.cjs

changing the directory name does not appear to work:

const config = {
  ROOT_DIR: '',
  FAILURE_THRESHOLD: 0.09,
  REPORT_DIR: 'visual-test-report'
}

module.exports = config

I've updated as such, and it still sends to what i assume is the default:

const config = {
    ROOT_DIR: '../../cypress/cypress-image-diff-screenshots',
    FAILURE_THRESHOLD: 0.09,
    REPORT_DIR: 'visual-test-report'
};

module.exports = config;

Any help would be appreciated.

github-actions[bot] commented 7 months ago

This issue is stale because it has been open for 30 days with no activity.

github-actions[bot] commented 6 months ago

This issue was closed because it has been inactive for 30 days since being marked as stale.

jannakha-copy-01 commented 5 months ago

following instructions from documentations didn't work for me either