feat: add pwt toMatchScreenshot diff bubbles support

lib/test-adapter/playwright.ts

@@ -12,9 +12,12 @@ import {ErrorName} from '../errors';
 import {ImagesInfoFormatter} from '../image-handler';
 import {AssertViewResult, ErrorDetails, ImageData, ImageInfoFull, ImageSize, TestError} from '../types';
 import * as utils from '../server-utils';
+import type {CoordBounds} from 'looks-same';
 
 export type PlaywrightAttachment = PlaywrightTestResult['attachments'][number];
 
+export type PwtImageDiffError = TestError & {meta?: {type: string, snapshotName: string, diffClusters: CoordBounds[]}};
+
 export enum PwtTestStatus {
     PASSED = 'passed',
     FAILED = 'failed',
@@ -118,7 +121,8 @@ export class PlaywrightTestAdapter implements ReporterTestResult {
                     stateName: state,
                     refImg,
                     diffImg,
-                    currImg
+                    currImg,
+                    diffClusters: this.getDiffClusters(state)
                 };
             } else if (this.error?.name === ErrorName.NO_REF_IMAGE && currImg) {
                 return {
@@ -252,6 +256,16 @@ export class PlaywrightTestAdapter implements ReporterTestResult {
         return '';
     }
 
+    private getDiffClusters(state: string): CoordBounds[] {
+        const snapshotName = state + '.png';
+        const errors = this._testResult.errors as PwtImageDiffError[];
+        const snapshotImageDiffError = errors.find(err => {
+            return err.meta?.type === 'ImageDiffError' && err.meta.snapshotName === snapshotName;
+        });
+
+        return snapshotImageDiffError?.meta?.diffClusters || [];
+    }
+
     private get _attachmentsByState(): Record<string, PlaywrightAttachment[]> {
         // Filtering out only images. Page screenshots on reject are named "screenshot", we don't want them in state either.
         const imageAttachments = this._testResult.attachments.filter(

test/unit/lib/test-adapter/playwright.ts

@@ -2,7 +2,7 @@ import sinon from 'sinon';
 import _ from 'lodash';
 import proxyquire from 'proxyquire';
 import {TestCase, TestResult} from '@playwright/test/reporter';
-import {ImageTitleEnding, PlaywrightAttachment, PlaywrightTestAdapterOptions, PwtTestStatus} from 'lib/test-adapter/playwright';
+import {ImageTitleEnding, PlaywrightAttachment, PlaywrightTestAdapterOptions, PwtImageDiffError, PwtTestStatus} from 'lib/test-adapter/playwright';
 import {ErrorName, ImageDiffError, NoRefImageError} from 'lib/errors';
 import {TestStatus} from 'lib/constants';
 
@@ -88,6 +88,23 @@ describe('PlaywrightTestAdapter', () => {
             assert.strictEqual(results[0].stateName, 'state1');
             assert.strictEqual(results[0].currImg?.path, 'state1' + ImageTitleEnding.Actual);
         });
+
+        it('should have diff clusters', () => {
+            const testCaseStub = mkTestCase();
+            const testResultStub = mkTestResult({
+                errors: [{message: 'Screenshot comparison failed', meta: {
+                    type: 'ImageDiffError',
+                    snapshotName: 'state1.png',
+                    diffClusters: [{left: 0, top: 0, right: 1, bottom: 1}]
+                }} as PwtImageDiffError]
+            });
+
+            const adapter = new PlaywrightTestAdapter(testCaseStub, testResultStub, mkAdapterOptions());
+
+            const results = adapter.assertViewResults as ImageDiffError[];
+
+            assert.deepEqual(results[0].diffClusters, [{left: 0, top: 0, right: 1, bottom: 1}]);
+        });
     });
 
     describe('attempt', () => {