test: base playwrignt setup for firefox and chrome

e2e/pages/base-page.ts

@@ -0,0 +1,16 @@
+import type { Page } from '@playwright/test';
+
+/**
+ * Shared base for all page objects. Subclasses extend this and expose
+ * domain-specific locators + actions — never raw selectors leaking into tests.
+ */
+export abstract class BasePage {
+    protected constructor(protected readonly page: Page) {}
+
+    /**
+     * Navigate to a path relative to baseURL.
+     */
+    async goto(path = '/') {
+        await this.page.goto(path);
+    }
+}

e2e/pages/comparison-page.ts

@@ -0,0 +1,36 @@
+import type {
+    Locator,
+    Page,
+} from '@playwright/test';
+import { BasePage } from './base-page';
+
+/**
+ * Page object for the root comparison view. Encapsulates locators for the
+ * primary controls so tests don't hardcode aria-labels or DOM structure.
+ */
+export class ComparisonPage extends BasePage {
+    readonly searchInput: Locator;
+    readonly previewInput: Locator;
+
+    constructor(page: Page) {
+        super(page);
+        this.searchInput = page.getByRole('textbox', { name: 'Search typefaces' });
+        this.previewInput = page.getByRole('textbox', { name: 'Preview text' });
+    }
+
+    /**
+     * Open the root page and wait for the main controls to be interactable.
+     */
+    async open() {
+        await this.goto('/');
+        await this.searchInput.waitFor({ state: 'visible' });
+    }
+
+    async searchFor(query: string) {
+        await this.searchInput.fill(query);
+    }
+
+    async setPreviewText(text: string) {
+        await this.previewInput.fill(text);
+    }
+}