Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix: save diff images only on failed tests #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 19, 2022
Merged

fix: save diff images only on failed tests #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c9dcd2
fix: save diff images only on failed tests
Zaista Dec 13, 2021
594d8f8
Make the generation of diff image configurable
Zaista Mar 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,16 @@ You can control where snapshots should be located by setting two environment var

The `actual` directory always points to the configured screenshot directory.


**Configure snapshot generation**

You can control if diff images are generated for successful tests by setting the following environment variable:

| Variable | Description |
|----------------------|---------------------------|
| ALWAYS_GENERATE_DIFF | Boolean, defaults to true |


## To Use

Add `cy.compareSnapshot('home');` in your tests specs whenever you want to test for visual regressions, making sure to replace `home` with a relevant name. You can also add an optional error threshold: Value can range from 0.00 (no difference) to 1.00 (every pixel is different). So, if you enter an error threshold of 0.51, the test would fail only if > 51% of pixels are different.
Expand Down
9 changes: 3 additions & 6 deletions src/command.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ function compareSnapshotCommand(defaultScreenshotOptions) {
(subject, name, params = {}) => {
const SNAPSHOT_BASE_DIRECTORY = Cypress.env('SNAPSHOT_BASE_DIRECTORY');
const SNAPSHOT_DIFF_DIRECTORY = Cypress.env('SNAPSHOT_DIFF_DIRECTORY');
const ALWAYS_GENERATE_DIFF = Cypress.env('ALWAYS_GENERATE_DIFF');

let screenshotOptions = defaultScreenshotOptions;
let errorThreshold = 0.0;
Expand Down Expand Up @@ -51,17 +52,13 @@ function compareSnapshotCommand(defaultScreenshotOptions) {
specDirectory: Cypress.spec.name,
baseDir: SNAPSHOT_BASE_DIRECTORY,
diffDir: SNAPSHOT_DIFF_DIRECTORY,
keepDiff: ALWAYS_GENERATE_DIFF,
errorThreshold,
};
cy.task('compareSnapshotsPlugin', options).then((results) => {
if (results.error) {
throw deserializeError(results.error);
}

if (results.percentage > errorThreshold) {
throw new Error(
`The "${name}" image is different. Threshold limit exceeded! \nExpected: ${errorThreshold} \nActual: ${results.percentage}`
);
}
});
}
}
Expand Down
22 changes: 19 additions & 3 deletions src/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const {
let SNAPSHOT_BASE_DIRECTORY;
let SNAPSHOT_DIFF_DIRECTORY;
let CYPRESS_SCREENSHOT_DIR;
let ALWAYS_GENERATE_DIFF;

function setupScreenshotPath(config) {
// use cypress default path as fallback
Expand All @@ -30,6 +31,11 @@ function setupSnapshotPaths(args) {
args.diffDir || path.join(process.cwd(), 'cypress', 'snapshots', 'diff');
}

function setupDiffImageGeneration(args) {
ALWAYS_GENERATE_DIFF = true;
if (args.keepDiff === false) ALWAYS_GENERATE_DIFF = false;
}

function visualRegressionCopy(args) {
setupSnapshotPaths(args);
const baseDir = path.join(SNAPSHOT_BASE_DIRECTORY, args.specName);
Expand All @@ -48,6 +54,7 @@ function visualRegressionCopy(args) {

async function compareSnapshotsPlugin(args) {
setupSnapshotPaths(args);
setupDiffImageGeneration(args);

const fileName = sanitize(args.fileName);

Expand All @@ -73,8 +80,6 @@ async function compareSnapshotsPlugin(args) {
let percentage = 0;
try {
await createFolder(SNAPSHOT_DIFF_DIRECTORY, args.failSilently);
const specFolder = path.join(SNAPSHOT_DIFF_DIRECTORY, args.specDirectory);
await createFolder(specFolder, args.failSilently);
const imgExpected = await parseImage(options.expectedImage);
const imgActual = await parseImage(options.actualImage);
const diff = new PNG({
Expand Down Expand Up @@ -103,7 +108,18 @@ async function compareSnapshotsPlugin(args) {
);
percentage = (mismatchedPixels / diff.width / diff.height) ** 0.5;

diff.pack().pipe(fs.createWriteStream(options.diffImage));
if (percentage > args.errorThreshold) {
const specFolder = path.join(SNAPSHOT_DIFF_DIRECTORY, args.specDirectory);
await createFolder(specFolder, args.failSilently);
diff.pack().pipe(fs.createWriteStream(options.diffImage));
throw new Error(
`The "${fileName}" image is different. Threshold limit exceeded! \nExpected: ${args.errorThreshold} \nActual: ${percentage}`
);
} else if (ALWAYS_GENERATE_DIFF) {
const specFolder = path.join(SNAPSHOT_DIFF_DIRECTORY, args.specDirectory);
await createFolder(specFolder, args.failSilently);
diff.pack().pipe(fs.createWriteStream(options.diffImage));
}
} catch (error) {
return { error: errorSerialize(error) };
}
Expand Down