feat: retry added by default

Author: pashidlos

README.md

@@ -54,7 +54,7 @@ const config: Config = {
   ciBuildId: "SOME_UNIQUE_ID",
 };
 
-const browserName = chromium.name(); 
+const browserName = chromium.name();
 const vrt = new PlaywrightVisualRegressionTracker(browserName, config);
 ```
 
@@ -121,6 +121,7 @@ await vrt.trackPage(page, imageName[, options])
 - `imageName` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)> name for the taken screenshot image
 - `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)> optional configuration with:
 - - `diffTollerancePercent` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)> specify acceptable difference from baseline, between `0-100`.
+- - `comment` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)> comment for test run
 - - `ignoreAreas` <[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>>
 - - - `x` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)> X-coordinate relative of left upper corner
 - - - `y` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)> Y-coordinate relative of left upper corner
@@ -139,6 +140,7 @@ await vrt.trackPage(page, imageName[, options])
 - - - `os` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)> operating system name, like Windows, Mac, etc.
 - - - `device` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)> device name, PC identifier, mobile identifier etc.
 - - - `viewport` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)> viewport size.
+- `retryCount` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)> Maximum time to retry screenshot if case of diff
 
 ### Track elementHandle
 
@@ -150,6 +152,7 @@ await vrt.trackElementHandle(elementHandle, imageName[, options])
 - `imageName` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)> name for the taken screenshot image
 - `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)> optional configuration with:
 - - `diffTollerancePercent` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)> specify acceptable difference from baseline, between `0-100`.
+- - `comment` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)> comment for test run
 - - `ignoreAreas` <[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)>>
 - - - `x` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)> X-coordinate relative of left upper corner
 - - - `y` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)> Y-coordinate relative of left upper corner
@@ -162,3 +165,4 @@ await vrt.trackElementHandle(elementHandle, imageName[, options])
 - - - `os` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)> operating system name, like Windows, Mac, etc.
 - - - `device` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)> device name, PC identifier, mobile identifier etc.
 - - - `viewport` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type)> viewport size.
+- `retryCount` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type)> Maximum time to retry screenshot if case of diff

lib/playwright.interfaces.ts

@@ -66,6 +66,7 @@ interface BaseTrackOptions {
   diffTollerancePercent?: number;
   ignoreAreas?: IgnoreArea[];
   agent?: Agent;
+  comment?: string;
 }
 
 export interface PageTrackOptions extends BaseTrackOptions {

lib/playwrightVisualRegressionTracker.spec.ts

@@ -79,6 +79,7 @@ describe("playwright", () => {
       it("track all fields", async () => {
         const imageName = "test name";
         const trackOptions: PageTrackOptions = {
+          comment: "Test comment",
           diffTollerancePercent: 12.31,
           ignoreAreas: [
             {
@@ -109,16 +110,20 @@ describe("playwright", () => {
         expect(pageMocked.screenshot).toHaveBeenCalledWith(
           trackOptions.screenshotOptions
         );
-        expect(VisualRegressionTracker.prototype.track).toHaveBeenCalledWith({
-          name: imageName,
-          imageBase64: screenshot.toString("base64"),
-          browser: browserName,
-          viewport: `1800x1600`,
-          os: trackOptions.agent?.os,
-          device: trackOptions.agent?.device,
-          diffTollerancePercent: trackOptions.diffTollerancePercent,
-          ignoreAreas: trackOptions.ignoreAreas,
-        });
+        expect(VisualRegressionTracker.prototype.track).toHaveBeenCalledWith(
+          {
+            name: imageName,
+            imageBase64: screenshot.toString("base64"),
+            browser: browserName,
+            viewport: `1800x1600`,
+            os: trackOptions.agent?.os,
+            device: trackOptions.agent?.device,
+            diffTollerancePercent: trackOptions.diffTollerancePercent,
+            ignoreAreas: trackOptions.ignoreAreas,
+            comment: trackOptions.comment,
+          },
+          2
+        );
       });
 
       it("track default fields", async () => {
@@ -128,15 +133,19 @@ describe("playwright", () => {
         await playwrightVrt.trackPage(page, imageName);
 
         expect(pageMocked.screenshot).toHaveBeenCalledWith(undefined);
-        expect(VisualRegressionTracker.prototype.track).toHaveBeenCalledWith({
-          name: imageName,
-          imageBase64: screenshot.toString("base64"),
-          browser: browserName,
-          viewport: undefined,
-          os: undefined,
-          device: undefined,
-          diffTollerancePercent: undefined,
-        });
+        expect(VisualRegressionTracker.prototype.track).toHaveBeenCalledWith(
+          {
+            name: imageName,
+            imageBase64: screenshot.toString("base64"),
+            browser: browserName,
+            viewport: undefined,
+            os: undefined,
+            device: undefined,
+            diffTollerancePercent: undefined,
+            comment: undefined,
+          },
+          2
+        );
       });
     });
 
@@ -162,6 +171,7 @@ describe("playwright", () => {
             omitBackground: true,
             timeout: 12,
           },
+          comment: "Test comment",
         };
         pageMocked.$ = jest.fn().mockResolvedValueOnce({});
         const elementHandle = await page.$("#test");
@@ -179,16 +189,20 @@ describe("playwright", () => {
         expect(elementHandleMocked!.screenshot).toHaveBeenCalledWith(
           trackOptions.screenshotOptions
         );
-        expect(VisualRegressionTracker.prototype.track).toHaveBeenCalledWith({
-          name: imageName,
-          imageBase64: screenshot.toString("base64"),
-          browser: browserName,
-          viewport: trackOptions.agent?.viewport,
-          os: trackOptions.agent?.os,
-          device: trackOptions.agent?.device,
-          diffTollerancePercent: trackOptions.diffTollerancePercent,
-          ignoreAreas: trackOptions.ignoreAreas,
-        });
+        expect(VisualRegressionTracker.prototype.track).toHaveBeenCalledWith(
+          {
+            name: imageName,
+            imageBase64: screenshot.toString("base64"),
+            browser: browserName,
+            viewport: trackOptions.agent?.viewport,
+            os: trackOptions.agent?.os,
+            device: trackOptions.agent?.device,
+            diffTollerancePercent: trackOptions.diffTollerancePercent,
+            ignoreAreas: trackOptions.ignoreAreas,
+            comment: trackOptions.comment,
+          },
+          2
+        );
       });
 
       it("track default fields", async () => {
@@ -203,15 +217,19 @@ describe("playwright", () => {
         await playwrightVrt.trackElementHandle(elementHandle, imageName);
 
         expect(elementHandleMocked!.screenshot).toHaveBeenCalledWith(undefined);
-        expect(VisualRegressionTracker.prototype.track).toHaveBeenCalledWith({
-          name: imageName,
-          imageBase64: screenshot.toString("base64"),
-          browser: browserName,
-          viewport: undefined,
-          os: undefined,
-          device: undefined,
-          diffTollerancePercent: undefined,
-        });
+        expect(VisualRegressionTracker.prototype.track).toHaveBeenCalledWith(
+          {
+            name: imageName,
+            imageBase64: screenshot.toString("base64"),
+            browser: browserName,
+            viewport: undefined,
+            os: undefined,
+            device: undefined,
+            diffTollerancePercent: undefined,
+            comment: undefined,
+          },
+          2
+        );
       });
 
       it("should throw if no elementHandle", async () => {

lib/playwrightVisualRegressionTracker.ts

@@ -29,44 +29,54 @@ export class PlaywrightVisualRegressionTracker {
   async trackPage(
     page: Pick<Page, "viewportSize" | "screenshot">,
     name: string,
-    options?: PageTrackOptions
+    options?: PageTrackOptions,
+    retryCount = 2
   ) {
     const viewportSize = page.viewportSize();
-    return this.vrt.track({
-      name,
-      imageBase64: (await page.screenshot(options?.screenshotOptions)).toString(
-        "base64"
-      ),
-      browser: this.browser,
-      viewport: viewportSize
-        ? `${viewportSize.width}x${viewportSize.height}`
-        : undefined,
-      os: options?.agent?.os,
-      device: options?.agent?.device,
-      diffTollerancePercent: options?.diffTollerancePercent,
-      ignoreAreas: options?.ignoreAreas,
-    });
+    return this.vrt.track(
+      {
+        name,
+        imageBase64: (
+          await page.screenshot(options?.screenshotOptions)
+        ).toString("base64"),
+        browser: this.browser,
+        viewport: viewportSize
+          ? `${viewportSize.width}x${viewportSize.height}`
+          : undefined,
+        os: options?.agent?.os,
+        device: options?.agent?.device,
+        diffTollerancePercent: options?.diffTollerancePercent,
+        ignoreAreas: options?.ignoreAreas,
+        comment: options?.comment,
+      },
+      retryCount
+    );
   }
 
   async trackElementHandle(
     elementHandle: ElementHandle | null,
     name: string,
-    options?: ElementHandleTrackOptions
+    options?: ElementHandleTrackOptions,
+    retryCount = 2
   ) {
     if (!elementHandle) {
       throw new Error("ElementHandle is null");
     }
-    return this.vrt.track({
-      name,
-      imageBase64: (
-        await elementHandle.screenshot(options?.screenshotOptions)
-      ).toString("base64"),
-      browser: this.browser,
-      viewport: options?.agent?.viewport,
-      os: options?.agent?.os,
-      device: options?.agent?.device,
-      diffTollerancePercent: options?.diffTollerancePercent,
-      ignoreAreas: options?.ignoreAreas,
-    });
+    return this.vrt.track(
+      {
+        name,
+        imageBase64: (
+          await elementHandle.screenshot(options?.screenshotOptions)
+        ).toString("base64"),
+        browser: this.browser,
+        viewport: options?.agent?.viewport,
+        os: options?.agent?.os,
+        device: options?.agent?.device,
+        diffTollerancePercent: options?.diffTollerancePercent,
+        ignoreAreas: options?.ignoreAreas,
+        comment: options?.comment,
+      },
+      retryCount
+    );
   }
 }