Change image snapshots to aria tag diffs

Author: jeffmaki

test/e2e/index.spec.ts

@@ -21,8 +21,9 @@ test.describe('home page', () => {
     await expect(cta).toHaveAttribute('href', '/signin');
 
     // Snapshot the hero copy block (not the full page) to avoid the background
-    // image. Baseline in test/e2e/index.spec.ts-snapshots/ (macOS-specific).
-    await expect(page.locator('.hero-copy')).toHaveScreenshot('home-hero.png');
+    // image. ARIA snapshot (text-based) so the baseline is cross-platform stable
+    // — pixel screenshots need a per-OS baseline and break on Linux CI.
+    await expect(page.locator('.hero-copy')).toMatchAriaSnapshot();
   });
 
   // @test e2e: an already-authenticated visitor is shown the hero, but the CTA points to the

test/e2e/index.spec.ts-snapshots/home-hero-chromium-darwin.png

@@ -0,0 +1,6 @@
+- heading "TDEI Workspaces" [level=1]
+- paragraph: TDEI Workspaces is an integrated editing platform for TDEI datasets. Workspaces provides tools and APIs for crafting and visualizing OpenSidewalks and GTFS Pathways data.
+- link "Sign In":
+  - /url: /signin
+- link "Learn more about the TDEI":
+  - /url: https://transitequity.cs.washington.edu/

test/e2e/index.spec.ts-snapshots/home-page-shows-the-hero-with-a-Sign-In-link-for-an-unauthenticated-visitor-1.aria.yml

@@ -28,12 +28,11 @@ test('shows the sign-in form to an unauthenticated visitor', async ({ page }) =>
   await expect(form).toBeVisible();
   await expect(page.getByRole('heading', { name: 'Welcome!' })).toBeVisible();
 
-  // Visual snapshot of just the form card (full-page would include the
-  // background image / fonts and be needlessly brittle). The baseline lives in
-  // test/e2e/signin.spec.ts-snapshots/ and is regenerated with
-  // `npx playwright test --update-snapshots`. NOTE: screenshots are
-  // platform-specific, so a Linux CI baseline differs from this macOS one.
-  await expect(form).toHaveScreenshot('signin-form.png');
+  // Snapshot just the form card (full-page would include the background image /
+  // fonts and be needlessly brittle). ARIA snapshot (text-based) so the baseline
+  // is cross-platform stable; regenerate with `--update-snapshots`. Pixel
+  // screenshots need a per-OS baseline and break on Linux CI.
+  await expect(form).toMatchAriaSnapshot();
 });
 
 // @test e2e: the toolbar doesn't show a username when the user is not logged in,

test/e2e/signin.spec.ts

@@ -0,0 +1,8 @@
+- heading "Welcome!" [level=1]
+- paragraph: Please login to your account.
+- text: TDEI Username
+- textbox "TDEI Username"
+- text: Enter the same username that you provide to use the TDEI API. Password
+- textbox "Password"
+- button "Show password": 
+- button "Sign In" [disabled]