Open ElliottDevlinPA opened 1 year ago
@ElliottDevlinPA can you please share your cypress's project package.json and the specification file?
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.
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 ?
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.
@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?
setupNodeEvents(on, config) {
// @ts-ignore
getCompareSnapshotsPlugin(on, config);
},
@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.
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?