Run-time errors when using cypress-image-diff with Cypress/Typescript and cypress-cucumber-preprocessor about cypress-image-diff HOT 20 CLOSED

So, is it a hope that the above enhancement will be done in a feasible future. Please, let me know

Thanks

Jeff

from cypress-image-diff.

Sounds like a great plan. So, I'll try removing report related part but it'll be nice to have the ability to generate a report.

Thanks

Jeff

from cypress-image-diff.

My cypress.json looks like this
{
"env": {},
"numTestsKeptInMemory": 50,
"watchForFileChanges": true,
"includeShadowDom": false,
"defaultCommandTimeout": 8000,
"execTimeout": 60000,
"taskTimeout": 60000,
"pageLoadTimeout": 60000,
"requestTimeout": 5000,
"responseTimeout": 30000,
"fileServerFolder": "root project folder",
"fixturesFolder": "fixtures",
"integrationFolder": "features",
"testFiles": "**/*.feature",
"pluginsFile": "plugins/index.ts",
"supportFile": "support/index.ts",
"componentFolder": "",
"videosFolder": "videos",
"htmlReportDir": "./test-results/html",
"reporterOptions": {
"reportDir": "",
"overwrite": true,
"html": false,
"json": true
},
"screenshotsFolder": "screenshots",
"screenshotOnRunFailure": true,
"trashAssetsBeforeRuns": true,
"videoCompression": 32,
"video": true,
"videoUploadOnPasses": true,
"viewportWidth": 1440,
"viewportHeight": 1080,
"nodeVersion": "bundled"
}

commands.ts looks like this
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
// cypress/support/commands.js
// @ts-ignore
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace Cypress {
interface Chainable {
compareSnapshot(a: string, b:number): void;
}
}
}

const compareSnapshotCommand = require('cypress-image-diff-js/dist/command')
compareSnapshotCommand()

plugins/intex.ts is below

My feature is

And teps under the feature look like
import { Given, When, Then, Before } from "cypress-cucumber-preprocessor/steps";

beforeEach(() => {
cy.viewport(1000, 600 );
cy.exec('ls');
})

Given(/^I am finally on CAIR login page$/, function () {
/// cy.visit("http://qe.ist.bina.com/login");
cy.visit("https://www.ups.com");
cy.wait(5000);
/// cy.url().should ('eq', 'yahoo.com')
});

Given(/^I make my own screenshot$/, function () {
// cy.screenshot('');
// @ts-ignore
cy.compareSnapshot('wholePage', 0.1)

});

from cypress-image-diff.

When I tried to remove report related code from Support/index.ts
I saw this error now

Think that actual snapshots for comparison using your tool had benn generated ina screenshot folder

Please help if you can. I really want to move forwar and use your tool in my upcomimg project

Thanks in advance

Jeff

from cypress-image-diff.

End of year is a bit tough for me.. if no one in the community picks it up soon I will work on it in the first weeks of the new year.

from cypress-image-diff.

from cypress-image-diff.

Please, let me know if you'll be able to get to my issue in a feasible future one way or another? Otherwise I'll stop waiting and will think to use some other approach to Visual testing

Thanks

Jeff

from cypress-image-diff.

Please, let me know if you'll be able to get to my issue in a feasible future one way or another? Otherwise I'll stop waiting and will think to use some other approach to Visual testing

Thanks

Jeff

@jradom the issue seems specific to generating the report. You might not be able to use after blocks on cucumber setups since it's a mocha thing... can you remove the below from cypress/support/index.js:

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

I can research a way for you to generate the report using cucumber framework and will update the readme. Please let me know if this works for you for now after removing the above.

from cypress-image-diff.

Unfortunately, your suggestion didn't help. I'm getting now this

Please, advise

Thanks a lot in advance

Jeff

from cypress-image-diff.

@jradom have you tried merging plugins/intex.ts is below?

so have the below written at the end of your second module that handles cucumber preprocessor:

  const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin')
  getCompareSnapshotsPlugin(on, config)

This is not a problem with this plugin and more how you are setting it up... can you try that and share your new plugin/index file content so we can take it from there?

from cypress-image-diff.

my index.ts looks like this

module.exports = (on:any, config:any) => {
const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin')
getCompareSnapshotsPlugin(on, config)
}

const browserify = require('@cypress/browserify-preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;
const resolve = require('resolve');
module.exports = (on:any, config:any) => {
const options = {
...browserify.defaultOptions,
typescript: resolve.sync('typescript', { baseDir: config.projectRoot }),
};
on('file:preprocessor', cucumber(options));
};

from cypress-image-diff.

module.exports = (on:any, config:any) => {
const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin')
getCompareSnapshotsPlugin(on, config)
}

const browserify = require('@cypress/browserify-preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;
const resolve = require('resolve');
module.exports = (on:any, config:any) => {
const options = {
...browserify.defaultOptions,
typescript: resolve.sync('typescript', { baseDir: config.projectRoot }),
};
on('file:preprocessor', cucumber(options));
};

Can you change to:

const browserify = require('@cypress/browserify-preprocessor');
const cucumber = require('cypress-cucumber-preprocessor').default;
const resolve = require('resolve');
module.exports = (on:any, config:any) => {
const options = {
...browserify.defaultOptions,
typescript: resolve.sync('typescript', { baseDir: config.projectRoot }),
};
on('file:preprocessor', cucumber(options));

const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin')
getCompareSnapshotsPlugin(on, config)
};

from cypress-image-diff.

I'll try and let you know

from cypress-image-diff.

Good news. It looks like it went to end for positive case with no diff. I'll try later a negative case. Also, I'd be very interested to generate a report. Can you please try making it work for Cypress/Cucumber configuration? Is is a particular low Cpress version I need to use?

Thanks a lot

Jeff

from cypress-image-diff.

now that we fixed the plugin, try following the report documentation... it most likely will work as well...

from cypress-image-diff.

Hi Pippo,

Reporting startedto work but in a strange way. When I run several features only one report was created. Any next one overwrites a previous. I'd prefer consolidated report or separate repots based on feature files. Also, it's not clear to me how to assert in order to verify a failed or passed scenario

Please, advise

Thanks

Jeff

from cypress-image-diff.

from cypress-image-diff.

below are my step samples

Given(/^I am finally on NIGHTLY login page$/, function () {
cy.visit('http://nightly.ist.bina.com/');
});

Then(/^I take my own screenshot NIGHTLY$/, function () {
let uploadToS3Local: string = 'aws s3 sync ' + BASELINE_LOCAL_PATH + ' ' + BASELINE_LOCAL_AWS_PATH;
let uploadToS3Jenkins: string = 'aws s3 sync ' + BASELINE_LOCAL_PATH + ' ' + BASELINE_JENKINS_AWS_PATH;

cy.compareSnapshot('wholePageYahoo', 0.1)

if (getOS() === 'Mac OS') {
    cy.exec(uploadToS3Local);
} else {
    cy.exec(uploadToS3Jenkins);
}

});

Then(/^I take my own screenshot and compare with actual YAHOO$/, function () {
let downloadToS3Local: string = 'aws s3 sync ' + BASELINE_LOCAL_AWS_PATH + " " + BASELINE_LOCAL_PATH;
let downloadToS3Jenkins: string = 'aws s3 sync ' + BASELINE_JENKINS_AWS_PATH + ' ' + BASELINE_LOCAL_PATH;

if (getOS() === 'Mac OS') {
    cy.exec(downloadToS3Local);
} else {
    cy.exec(downloadToS3Jenkins);
}

cy.compareSnapshot('wholePageYahoo', 0.1)

});

from cypress-image-diff.

Hi Pippo,

Reporting startedto work but in a strange way. When I run several features only one report was created. Any next one overwrites a previous. I'd prefer consolidated report or separate repots based on feature files. Also, it's not clear to me how to assert in order to verify a failed or passed scenario

Please, advise

Thanks

Jeff

Please open a new issue for the report with instructions and screenshots of the issue.

Assert is part of the compareScreenshot command. If it has a baseline and the new comparison image fails the diff it will fail the test.

from cypress-image-diff.

I see.

Thanks for clarifying

Jeff

from cypress-image-diff.