Add two simple e2e tests

4 files changed, 118 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
index f1d398f637..693b91e2ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@
 /gui/scripts/ne_50m_admin_1_states_provinces_lines/
 /gui/scripts/out/
 /gui/src/main/management_interface/
+/gui/e2e/screenshots/
 /build/
 /dist
 .idea/
diff --git a/gui/e2e/main.spec.ts b/gui/e2e/main.spec.ts
new file mode 100644
index 0000000000..8114b492f1
--- /dev/null
+++ b/gui/e2e/main.spec.ts
@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+import { ElectronAppInfo } from 'electron-playwright-helpers';
+import { Page } from 'playwright';
+
+import { startApp } from './utils';
+
+let appWindow: Page;
+let appInfo: ElectronAppInfo;
+
+test.beforeAll(async () => {
+  const startAppResponse = await startApp();
+  appInfo = startAppResponse.appInfo;
+  appWindow = startAppResponse.appWindow;
+});
+
+test.afterAll(async () => {
+  await appWindow.close();
+});
+
+test('Validate title', async () => {
+  const title = await appWindow.title();
+  expect(title).toBe('Mullvad VPN');
+  await expect(appWindow.locator('header')).toBeVisible();
+});
+
+test('Validate status and header', async () => {
+  const statusSpan = appWindow.locator('span[role="status"]');
+  const header = appWindow.locator('header');
+
+  await expect(statusSpan).toContainText('UNSECURED CONNECTION');
+  let headerColor = await header.evaluate((el) => {
+    return window.getComputedStyle(el).getPropertyValue('background-color');
+  });
+  expect(headerColor).toBe('rgb(227, 64, 57)');
+  await appWindow.screenshot({ path: `e2e/screenshots/${appInfo.platform}/unsecured.png` });
+
+  await appWindow.locator('text=Secure my connection').click();
+
+  await expect(statusSpan).toContainText('SECURE CONNECTION');
+  headerColor = await header.evaluate((el) => {
+    return window.getComputedStyle(el).getPropertyValue('background-color');
+  });
+  expect(headerColor).toBe('rgb(68, 173, 77)');
+  await appWindow.screenshot({ path: `e2e/screenshots/${appInfo.platform}/secure.png` });
+
+  await appWindow.locator('text=Disconnect').click();
+  await expect(statusSpan).toContainText('UNSECURED CONNECTION');
+});
diff --git a/gui/e2e/settings.spec.ts b/gui/e2e/settings.spec.ts
new file mode 100644
index 0000000000..6e6aef1d4b
--- /dev/null
+++ b/gui/e2e/settings.spec.ts
@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test';
+import { Page } from 'playwright';
+
+import { startApp } from './utils';
+
+let appWindow: Page;
+
+test.beforeAll(async () => {
+  const startAppResponse = await startApp();
+  appWindow = startAppResponse.appWindow;
+  await appWindow.click('button[aria-label="Settings"]');
+});
+
+test.afterAll(async () => {
+  await appWindow.close();
+});
+
+test('Settings Page', async () => {
+  const title = await appWindow.locator('h1');
+  await expect(title).toContainText('Settings');
+
+  const closeButton = await appWindow.locator('button[aria-label="Close"]');
+  await expect(closeButton).toBeVisible();
+});
diff --git a/gui/e2e/utils.ts b/gui/e2e/utils.ts
new file mode 100644
index 0000000000..a588efeee9
--- /dev/null
+++ b/gui/e2e/utils.ts
@@ -0,0 +1,45 @@
+import { ElectronAppInfo, findLatestBuild, parseElectronApp } from 'electron-playwright-helpers';
+import { Page } from 'playwright';
+import { _electron as electron, ElectronApplication } from 'playwright-core';
+
+interface StartAppResponse {
+  electronApp: ElectronApplication;
+  appWindow: Page;
+  appInfo: ElectronAppInfo;
+}
+
+const startApp = async (): Promise<StartAppResponse> => {
+  // find the latest build in the out directory
+  const latestBuild = findLatestBuild('../dist');
+  // parse the directory and find paths and other info
+  const appInfo = parseElectronApp(latestBuild);
+  process.env.CI = 'e2e';
+
+  const electronApp = await electron.launch({
+    args: [appInfo.main],
+    executablePath: appInfo.executable,
+  });
+
+  const appWindow = await electronApp.firstWindow();
+
+  process.env.CI = 'e2e';
+
+  electronApp.on('window', (page) => {
+    const filename = page.url()?.split('/').pop();
+    console.log(`Window opened: ${filename}`);
+
+    // capture errors
+    page.on('pageerror', (error) => {
+      console.error(error);
+    });
+
+    // capture console messages
+    page.on('console', (msg) => {
+      console.log(msg.text());
+    });
+  });
+
+  return { electronApp, appInfo, appWindow };
+};
+
+export { startApp };