test(browsers): add devices CTA

.gitattributes

@@ -0,0 +1 @@
+tests/**/*.png filter=lfs diff=lfs merge=lfs -text

package.json

@@ -7,7 +7,9 @@
   "scripts": {
     "dev": "vite --host",
     "build": "tsc && vite build",
-    "check": "biome check .",
+    "test": "npm run test:static && npm run test:browsers",
+    "test:static": "biome check .",
+    "test:browsers": "playwright test",
     "preview": "vite preview",
     "package": "gzipper c -i html,js,css,png,ico,svg,webmanifest,txt dist dist/output && tar -cvf dist/build.tar -C ./dist/output/ $(ls ./dist/output/)"
   },

playwright.config.ts

@@ -1,16 +1,10 @@
-import { defineConfig, devices } from '@playwright/test';
-
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
+import { defineConfig, devices } from "@playwright/test";
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './tests',
+  testDir: "./tests",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -20,32 +14,32 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    baseURL: "http://127.0.0.1:5173",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
 
     /* Test against mobile viewports. */
     // {
@@ -69,9 +63,9 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: "vite --host --port=5173",
+    url: "http://127.0.0.1:5173",
+    reuseExistingServer: !process.env.CI,
+  },
 });

tests/example.spec.ts

@@ -1,18 +1,37 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from "@playwright/test";
 
-test('has title', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+test("Basic page load", async ({ page }) => {
+  await page.goto("/");
+  await expect(page).toHaveTitle("Meshtastic Web");
+});
+
+test("Prompts adding a new connection as the call to action when there are no devices", async ({page}) => {
+  await page.goto("/");
+
+  await expect(page).toHaveScreenshot();
 
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Playwright/);
+  await expect(page.getByRole("heading", { name: "No Devices" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "New Connection" })).toBeVisible();
 });
 
-test('get started link', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+test("Shows the protocols as the first step of adding a device", async ({page}) => {
+  await page.goto("/");
+  await page.getByRole("button", { name: "New Connection" }).click();
+  await expect(page.getByRole("heading", { name: "Connect New Device" })).toBeVisible();
+  await expect(page).toHaveScreenshot();
+});
 
-  // Click the get started link.
-  await page.getByRole('link', { name: 'Get started' }).click();
+test("Requests the IP address or hostname as input when connecting over HTTP", async ({page}) => {
+  await page.goto("/");
+  await page.getByRole("button", { name: "New Connection" }).click();
+  await page.getByRole("tab", { name: "HTTP" }).click();
+  await expect(page.getByRole('dialog')).toHaveScreenshot('connect-over-http.png');
+});
 
-  // Expects page to have a heading with the name of Installation.
-  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+test("New Device button for the brower's dialog UI is presented when connecting over serial", async ({page}) => {
+  await page.goto("/");
+  await page.getByRole("button", { name: "New Connection" }).click();
+  await page.getByRole("tab", { name: "Serial" }).click();
+  await expect(page.getByRole("button", { name: "New Device" })).toBeVisible();
+  await expect(page.getByRole('dialog')).toHaveScreenshot('connect-over-serial.png');
 });