Merge pull request #97 from Visual-Regression-Tracker/94-playwright/test

BREAKING CHANGE: `browserType` replaced with `browserName`. 
Added support for `@playwright/test`

Author: pashidlos

lib/playwright.interfaces.ts

@@ -62,16 +62,16 @@ export interface Agent {
   viewport?: string;
 }
 
-export interface PageTrackOptions {
+interface BaseTrackOptions {
   diffTollerancePercent?: number;
   ignoreAreas?: IgnoreArea[];
-  screenshotOptions?: PageScreenshotOptions;
   agent?: Agent;
 }
 
-export interface ElementHandleTrackOptions {
-  diffTollerancePercent?: number;
-  ignoreAreas?: IgnoreArea[];
+export interface PageTrackOptions extends BaseTrackOptions {
+  screenshotOptions?: PageScreenshotOptions;
+}
+
+export interface ElementHandleTrackOptions extends BaseTrackOptions {
   screenshotOptions?: ElementHandleScreenshotOptions;
-  agent?: Agent;
 }

lib/playwrightVisualRegressionTracker.spec.ts

@@ -7,12 +7,13 @@ import {
   PlaywrightVisualRegressionTracker,
   PageTrackOptions,
   ElementHandleTrackOptions,
-} from ".";
+} from "./index";
 import { mocked } from "ts-jest/utils";
 import { MaybeMocked } from "ts-jest/dist/utils/testing";
 
 jest.mock("@visual-regression-tracker/sdk-js");
 
+let browserName = chromium.name();
 let browserType = chromium;
 let browser: Browser;
 let context: BrowserContext;
@@ -44,11 +45,11 @@ afterAll(async () => {
 
 describe("playwright", () => {
   beforeEach(() => {
-    playwrightVrt = new PlaywrightVisualRegressionTracker(browserType, config);
+    playwrightVrt = new PlaywrightVisualRegressionTracker(browserName, config);
   });
 
   it("constructor", async () => {
-    expect(playwrightVrt["browser"]).toBe(browserType.name());
+    expect(playwrightVrt["browser"]).toBe(browserName);
     expect(VisualRegressionTracker).toHaveBeenCalledWith(config);
   });
 
@@ -111,7 +112,7 @@ describe("playwright", () => {
         expect(VisualRegressionTracker.prototype.track).toHaveBeenCalledWith({
           name: imageName,
           imageBase64: screenshot.toString("base64"),
-          browser: browserType.name(),
+          browser: browserName,
           viewport: `1800x1600`,
           os: trackOptions.agent?.os,
           device: trackOptions.agent?.device,
@@ -130,7 +131,7 @@ describe("playwright", () => {
         expect(VisualRegressionTracker.prototype.track).toHaveBeenCalledWith({
           name: imageName,
           imageBase64: screenshot.toString("base64"),
-          browser: browserType.name(),
+          browser: browserName,
           viewport: undefined,
           os: undefined,
           device: undefined,
@@ -181,7 +182,7 @@ describe("playwright", () => {
         expect(VisualRegressionTracker.prototype.track).toHaveBeenCalledWith({
           name: imageName,
           imageBase64: screenshot.toString("base64"),
-          browser: browserType.name(),
+          browser: browserName,
           viewport: trackOptions.agent?.viewport,
           os: trackOptions.agent?.os,
           device: trackOptions.agent?.device,
@@ -205,7 +206,7 @@ describe("playwright", () => {
         expect(VisualRegressionTracker.prototype.track).toHaveBeenCalledWith({
           name: imageName,
           imageBase64: screenshot.toString("base64"),
-          browser: browserType.name(),
+          browser: browserName,
           viewport: undefined,
           os: undefined,
           device: undefined,

lib/playwrightVisualRegressionTracker.ts

@@ -1,9 +1,9 @@
 import {
   VisualRegressionTracker,
-  Config,
   BuildResponse,
+  Config,
 } from "@visual-regression-tracker/sdk-js";
-import { Page, Browser, BrowserType, ElementHandle } from "playwright";
+import { Page, ElementHandle } from "playwright";
 import {
   PageTrackOptions,
   ElementHandleTrackOptions,
@@ -13,9 +13,9 @@ export class PlaywrightVisualRegressionTracker {
   private vrt: VisualRegressionTracker;
   private browser: string;
 
-  constructor(browserType: BrowserType<Browser>, config?: Config) {
+  constructor(browserName: string, config?: Config) {
     this.vrt = new VisualRegressionTracker(config);
-    this.browser = browserType.name();
+    this.browser = browserName;
   }
 
   async start(): Promise<BuildResponse> {
@@ -26,7 +26,11 @@ export class PlaywrightVisualRegressionTracker {
     return this.vrt.stop();
   }
 
-  async trackPage(page: Page, name: string, options?: PageTrackOptions) {
+  async trackPage(
+    page: Pick<Page, "viewportSize" | "screenshot">,
+    name: string,
+    options?: PageTrackOptions
+  ) {
     const viewportSize = page.viewportSize();
     return this.vrt.track({
       name,