Add screenshot diffing

7 files changed, 15 insertions, 6 deletions

diff --git a/gui/e2e/tunnel-state.spec.ts b/gui/e2e/tunnel-state.spec.ts
index 763c6ac624..3530f5712a 100644
--- a/gui/e2e/tunnel-state.spec.ts
+++ b/gui/e2e/tunnel-state.spec.ts
@@ -25,7 +25,6 @@ const mockLocation: ILocation = {
 
 const getLabel = () => appWindow.locator('span[role="status"]');
 const getHeader = () => appWindow.locator('header');
-const getScreenShotPath = (test: string) => `e2e/screenshots/tunnel-state/${test}.png`;
 
 let appWindow: Page;
 
@@ -65,7 +64,8 @@ test('App should show disconnected tunnel state', async () => {
   const buttonColor = await getBackgroundColor(button);
   expect(buttonColor).toBe(SECURE_COLOR);
 
-  await appWindow.screenshot({ path: getScreenShotPath('disconnected') });
+  await appWindow.waitForTimeout(2000);
+  expect(await appWindow.screenshot()).toMatchSnapshot();
 });
 
 /**
@@ -95,7 +95,8 @@ test('App should show connecting tunnel state', async () => {
   const buttonColor = await getBackgroundColor(button);
   expect(buttonColor).toBe('rgba(227, 64, 57, 0.6)');
 
-  await appWindow.screenshot({ path: getScreenShotPath('connecting') });
+  await appWindow.waitForTimeout(2000);
+  expect(await appWindow.screenshot()).toMatchSnapshot();
 });
 
 /**
@@ -132,7 +133,8 @@ test('App should show connected tunnel state', async () => {
   const buttonColor = await getBackgroundColor(button);
   expect(buttonColor).toBe('rgba(255, 255, 255, 0.2)');
 
-  await appWindow.screenshot({ path: getScreenShotPath('connected') });
+  await appWindow.waitForTimeout(2000);
+  expect(await appWindow.screenshot()).toMatchSnapshot();
 });
 
 /**
@@ -162,7 +164,8 @@ test('App should show disconnecting tunnel state', async () => {
   const buttonColor = await getBackgroundColor(button);
   expect(buttonColor).toBe(SECURE_COLOR);
 
-  await appWindow.screenshot({ path: getScreenShotPath('disconnecting') });
+  await appWindow.waitForTimeout(2000);
+  expect(await appWindow.screenshot()).toMatchSnapshot();
 });
 
 /**
@@ -188,5 +191,5 @@ test('App should show error tunnel state', async () => {
   const headerColor = await getBackgroundColor(header);
   expect(headerColor).toBe(SECURE_COLOR);
 
-  await appWindow.screenshot({ path: getScreenShotPath('error') });
+  expect(await appWindow.screenshot()).toMatchSnapshot();
 });
diff --git a/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-connected-tunnel-state-1-darwin.png b/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-connected-tunnel-state-1-darwin.png
new file mode 100644
index 0000000000..4024c8674c
--- /dev/null
+++ b/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-connected-tunnel-state-1-darwin.png
diff --git a/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-connecting-tunnel-state-1-darwin.png b/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-connecting-tunnel-state-1-darwin.png
new file mode 100644
index 0000000000..d88f46dca1
--- /dev/null
+++ b/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-connecting-tunnel-state-1-darwin.png
diff --git a/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-disconnected-tunnel-state-1-darwin.png b/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-disconnected-tunnel-state-1-darwin.png
new file mode 100644
index 0000000000..112dcf5b0a
--- /dev/null
+++ b/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-disconnected-tunnel-state-1-darwin.png
diff --git a/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-disconnecting-tunnel-state-1-darwin.png b/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-disconnecting-tunnel-state-1-darwin.png
new file mode 100644
index 0000000000..f0bc568cd8
--- /dev/null
+++ b/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-disconnecting-tunnel-state-1-darwin.png
diff --git a/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-error-tunnel-state-1-darwin.png b/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-error-tunnel-state-1-darwin.png
new file mode 100644
index 0000000000..f8d7a3b5ec
--- /dev/null
+++ b/gui/e2e/tunnel-state.spec.ts-snapshots/App-should-show-error-tunnel-state-1-darwin.png
diff --git a/gui/playwright.config.ts b/gui/playwright.config.ts
index 5a7d8cdafd..9cb07e300c 100644
--- a/gui/playwright.config.ts
+++ b/gui/playwright.config.ts
@@ -2,6 +2,12 @@ import { PlaywrightTestConfig } from '@playwright/test';
 const config: PlaywrightTestConfig = {
   testDir: './e2e',
   maxFailures: 2,
+  expect: {
+    toMatchSnapshot: {
+      threshold: 0.1,
+      maxDiffPixelRatio: 0.01,
+    },
+  },
   use: {
     screenshot: 'only-on-failure',
     video: 'retain-on-failure',