Uncaught Error on compareSnapshotCommand

[ElliottDevlinPA]

Hi,

I am trying to setup a framework using Cypress and your plugin for visual testing but am experiencing a problem when trying to run a test and take some base images. I have followed the TypeScript setup instructions on your GitHub page but am experiencing the error shown below....

I'm using a Macbook with Big Sur, node v18.13.0 and Cypress v12.7.0.

Are you able to help please?

[Andremoniy]

@ElliottDevlinPA can you please share your cypress's project package.json and the specification file?

[ElliottDevlinPA]

Hi @Andremoniy, thank you for your response.

Sure, please see the following....

describe('Visual Regression Tests', () => {
    it('Main Firehose', () => {
        cy.impersonateSulLogin(TestConfig.getCreateAndNowUserId(), TestConfig.getCreateAndNowUserEmail());
        MobileMenu.navigateToPageDirectly('/create');
        cy.viewport(1440, 900);
        cy.wait(3000);
        cy.compareSnapshot('Main Firehose', 0.1);
    });
});

{
  "name": "explore-mobile-test-framework",
  "version": "1.0.0",
  "scripts": {
    "cypress:open": "cypress open",
    "cypress:headless": "npm run cleanup && percy exec -- cypress run --headless --browser electron",
    "format": "prettier --write \"cypress/**/*.ts\"",
    "lint:code": "tslint --project tsconfig.json --config tslint.json",
    "cleanup": "rimraf mochawesome-report cypress/screenshots",
    "report": "npm run report:copyScreenshots; npm run report:merge && npm run report:generate",
    "report:merge": "mochawesome-merge --reportDir mochawesome-report > ./mochawesome-report/output.json",
    "report:generate": "marge ./mochawesome-report/output.json",
    "report:copyScreenshots": "cp -r cypress/screenshots ./mochawesome-report/screenshots"
  },
  "dependencies": {
    "cypress-visual-regression-resemble-js": "^1.0.1",
    "cypress-wait-until": "^1.6.1",
    "dayjs": "^1.10.4",
    "dotenv": "^8.2.0",
    "prettier": "^2.7.1"
  },
  "devDependencies": {
    "@cypress/webpack-preprocessor": "^4.1.3",
    "@percy/cli": "^1.0.0-beta.63",
    "@percy/cypress": "^3.1.2",
    "@press-association/content-tslint-rules": "^1.0.2",
    "@types/mocha": "^7.0.2",
    "@types/node": "^16.11.7",
    "cypress": "^12.7.0",
    "cypress-image-snapshot": "^4.0.1",
    "cypress-multi-reporters": "^1.6.1",
    "mocha": "^7.2.0",
    "mochawesome": "^7.1.3",
    "mochawesome-merge": "^4.2.1",
    "mochawesome-report-generator": "^6.2.0",
    "prettier": "^2.0.2",
    "rimraf": "^3.0.2",
    "ts-loader": "^6.2.2",
    "tsify": "^4.0.1",
    "tslint": "^6.1.1",
    "typescript": "^3.8.3",
    "webpack": "^4.42.1"
  },
  "percy": {
    "version": 2,
    "snapshot": {
      "percyCSS": "app-footer { display: none; }"
    },
    "discovery": {
      "disableCache": true
    }
  }
}

Elliott.

[PpBoyington]

Hi @Andremoniy, thank you for your response.

Sure, please see the following....

describe('Visual Regression Tests', () => {
    it('Main Firehose', () => {
        cy.impersonateSulLogin(TestConfig.getCreateAndNowUserId(), TestConfig.getCreateAndNowUserEmail());
        MobileMenu.navigateToPageDirectly('/create');
        cy.viewport(1440, 900);
        cy.wait(3000);
        cy.compareSnapshot('Main Firehose', 0.1);
    });
});

{
  "name": "explore-mobile-test-framework",
  "version": "1.0.0",
  "scripts": {
    "cypress:open": "cypress open",
    "cypress:headless": "npm run cleanup && percy exec -- cypress run --headless --browser electron",
    "format": "prettier --write \"cypress/**/*.ts\"",
    "lint:code": "tslint --project tsconfig.json --config tslint.json",
    "cleanup": "rimraf mochawesome-report cypress/screenshots",
    "report": "npm run report:copyScreenshots; npm run report:merge && npm run report:generate",
    "report:merge": "mochawesome-merge --reportDir mochawesome-report > ./mochawesome-report/output.json",
    "report:generate": "marge ./mochawesome-report/output.json",
    "report:copyScreenshots": "cp -r cypress/screenshots ./mochawesome-report/screenshots"
  },
  "dependencies": {
    "cypress-visual-regression-resemble-js": "^1.0.1",
    "cypress-wait-until": "^1.6.1",
    "dayjs": "^1.10.4",
    "dotenv": "^8.2.0",
    "prettier": "^2.7.1"
  },
  "devDependencies": {
    "@cypress/webpack-preprocessor": "^4.1.3",
    "@percy/cli": "^1.0.0-beta.63",
    "@percy/cypress": "^3.1.2",
    "@press-association/content-tslint-rules": "^1.0.2",
    "@types/mocha": "^7.0.2",
    "@types/node": "^16.11.7",
    "cypress": "^12.7.0",
    "cypress-image-snapshot": "^4.0.1",
    "cypress-multi-reporters": "^1.6.1",
    "mocha": "^7.2.0",
    "mochawesome": "^7.1.3",
    "mochawesome-merge": "^4.2.1",
    "mochawesome-report-generator": "^6.2.0",
    "prettier": "^2.0.2",
    "rimraf": "^3.0.2",
    "ts-loader": "^6.2.2",
    "tsify": "^4.0.1",
    "tslint": "^6.1.1",
    "typescript": "^3.8.3",
    "webpack": "^4.42.1"
  },
  "percy": {
    "version": 2,
    "snapshot": {
      "percyCSS": "app-footer { display: none; }"
    },
    "discovery": {
      "disableCache": true
    }
  }
}

Elliott.

Could you try to update to our latest version of the project (1.1.0) ? Also could you copy paste your cypress config file please ?

[ElliottDevlinPA]

Hi @Andremoniy, updating to your latest version has resulted in a different error - please see attached...

This is my config...

import { defineConfig } from 'cypress';
import getCompareSnapshotsPlugin from 'cypress-visual-regression-resemble-js/dist/plugin';
export default defineConfig({
  video: false,
  responseTimeout: 90000,
  requestTimeout: 90000,
  env: {
    screenshotsFolder: './cypress/snapshots/actual',
    trashAssetsBeforeRuns: true,
    video: false,
    failSilently: false,
    SNAPSHOT_BASE_DIRECTORY: './cypress/snapshots/base',
    SNAPSHOT_DIFF_DIRECTORY: './cypress/snapshots/diff',
    INTEGRATION_FOLDER: 'cypress/integration/',
    ALWAYS_GENERATE_DIFF: false,
    ALLOW_VISUAL_REGRESSION_TO_FAIL: true,
  },
  e2e: {
    setupNodeEvents(on, config) {
      getCompareSnapshotsPlugin(on, config);
      return require('./cypress/plugins/index.js')(on, config);
    },
    baseUrl: 'https://explore-staging.pa.media/',
  },
  reporter: 'cypress-multi-reporters',
  reporterOptions: {
    configFile: 'reporter-config.json'
  },
});

Thanks.

[Andremoniy]

@ElliottDevlinPA we are not sure why you are configuring the e2e section like that:

setupNodeEvents(on, config) {
      getCompareSnapshotsPlugin(on, config);
      return require('./cypress/plugins/index.js')(on, config);
    },

Can you try to configure it rather like in our test sample application?

https://github.com/Andremoniy/cypress-visual-regression-resemble-js/blob/main/docker/sample_application/sample_application_cypress/cypress.config.ts#L7-L10

setupNodeEvents(on, config) {
      // @ts-ignore
      getCompareSnapshotsPlugin(on, config);
    },

[ElliottDevlinPA]

@Andremoniy that is a hangover from when we migrated the project to Cypress v10, the migration process automatically setup the e2e section in that way.

I have updated the config as per your suggestion but still get the same error as above when I try to run the test to get the base snapshots.