Introduce cypress-image-diff for visual testing

[dariober]

No description provided.

[shashankbrgowda]

Create new annotation is working as expected after SO changes. I tried to run the new cypress tests in my local but its failing for me (may be I'm doing something wrong)

Cypress test Error: Image difference greater than threshold: 0

[dariober]

@shashankbrgowda Thanks!

Cypress test Error: Image difference greater than threshold: 0

It maybe because of this:

Apollo3/packages/jbrowse-plugin-apollo/cypress/e2e/visualGeneModel.cy.ts

Lines 24 to 29 in 26c45e2

	// NB: The size of the image differs between headless and interactive execution of cypress.
	// In headless mode (including github workflow) use this:
	cy.get('canvas[data-testid="overlayCanvas"]').compareSnapshot('gene-model')
	// For local testing use this (comment out when pushing to github):
	// cy.get('canvas[data-testid="overlayCanvas"]').compareSnapshot('gene-model-local')

Unless you have already done so, could you try to comment out line 26 and enable line 29? (It's unfortunate one has to do this, I hope to find a better solution)

If it fails you can have look at the content of packages/jbrowse-plugin-apollo/cypress/cypress-image-diff-screenshots to get an idea of where the difference is.