fix(test-runner-visual-regression): fix writing image diffs

Author: hklsiteimprove

.changeset/strong-mayflies-cheat.md

@@ -0,0 +1,5 @@
+---
+'@web/test-runner-visual-regression': patch
+---
+
+Fixing bugs related to writing failed and diff images

packages/test-runner-visual-regression/src/pixelMatchDiff.ts

@@ -25,7 +25,7 @@ export function pixelMatchDiff({ baselineImage, image, options }: DiffArgs): Dif
   const diffPercentage = (numDiffPixels / (width * height)) * 100;
 
   return {
-    diffImage: diff.data,
+    diffImage: PNG.sync.write(diff),
     diffPercentage,
   };
 }

packages/test-runner-visual-regression/src/visualDiffCommand.ts

@@ -64,7 +64,7 @@ export async function visualDiffCommand(
       filePath: resolveImagePath(baseDir, failedName),
       baseDir,
       name: failedName,
-      content: diffImage,
+      content: image,
     });
   }