feat: implement Phase 4 - Component Test IDs

Add data-testid attributes to key UI elements for improved test
reliability and resilience to UI changes.

ProjectSelection.tsx:
- data-testid="project-selection" (container)
- data-testid="project-row-{id}" and data-project-name (rows)
- data-testid="project-checkbox-{id}" (checkboxes)
- data-testid="selected-projects-summary/count"
- data-testid="continue-to-alert-button"

AlertForm.tsx:
- data-testid="alert-form" (container)
- data-testid="coordinates-display"
- data-testid="selected-projects-display"
- data-testid="alert-submit-button"
- data-testid="alert-error-message"
- data-testid="alert-validation-error"

Page objects updated to use new selectors instead of fragile
CSS class or text matchers.

Author: claude

src/components/AlertForm.tsx

@@ -239,7 +239,10 @@ export const AlertForm = ({
       : selectedProjectNames.join(", ");
 
   return (
-    <div className="min-h-screen p-4 bg-gradient-to-br from-blue-50 to-indigo-100">
+    <div
+      className="min-h-screen p-4 bg-gradient-to-br from-blue-50 to-indigo-100"
+      data-testid="alert-form"
+    >
       <div className="max-w-2xl mx-auto">
         <div className="flex items-center gap-4 mb-6">
           <Button
@@ -265,7 +268,10 @@ export const AlertForm = ({
               <div className="flex items-center justify-between">
                 <div>
                   <p className="text-sm text-gray-600">{t("alert.location")}</p>
-                  <p className="font-mono text-sm">
+                  <p
+                    className="font-mono text-sm"
+                    data-testid="coordinates-display"
+                  >
                     {coordinates.lat}, {coordinates.lng}
                   </p>
                 </div>
@@ -280,7 +286,7 @@ export const AlertForm = ({
                 </Button>
               </div>
 
-              <div>
+              <div data-testid="selected-projects-display">
                 <p className="text-sm text-gray-600">
                   {t("alert.selectedProjects", {
                     count: selectedProjects.length,
@@ -348,15 +354,21 @@ export const AlertForm = ({
                   {t("alert.slugFormatHelp")}
                 </p>
                 {alertName && !validateSlug(alertName) && (
-                  <p className="text-sm text-red-600">
+                  <p
+                    className="text-sm text-red-600"
+                    data-testid="alert-validation-error"
+                  >
                     {t("alert.invalidFormat")}
                   </p>
                 )}
               </div>
 
               {/* Error Message */}
               {errorMessage && (
-                <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+                <div
+                  className="bg-red-50 border border-red-200 rounded-lg p-3"
+                  data-testid="alert-error-message"
+                >
                   <p className="text-sm text-red-700">{errorMessage}</p>
                 </div>
               )}
@@ -369,6 +381,7 @@ export const AlertForm = ({
                   submissionState === "loading" || !validateSlug(alertName)
                 }
                 variant={getButtonVariant()}
+                data-testid="alert-submit-button"
               >
                 {getButtonContent()}
               </Button>

src/components/ProjectSelection.tsx

@@ -135,7 +135,10 @@ export const ProjectSelection = ({
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+    <div
+      className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100"
+      data-testid="project-selection"
+    >
       {/* Mobile-first header */}
       <div
         className="bg-white/95 backdrop-blur-sm border-b border-gray-200 px-4 py-3"
@@ -181,6 +184,8 @@ export const ProjectSelection = ({
                   <div
                     key={project.projectId}
                     className="flex items-center space-x-3 p-4 border rounded-lg hover:bg-gray-50 transition-colors min-h-[60px]"
+                    data-testid={`project-row-${project.projectId}`}
+                    data-project-name={project.name}
                   >
                     <Checkbox
                       id={project.projectId}
@@ -189,6 +194,7 @@ export const ProjectSelection = ({
                         handleProjectToggle(project.projectId)
                       }
                       className="scale-125"
+                      data-testid={`project-checkbox-${project.projectId}`}
                     />
                     <Label
                       htmlFor={project.projectId}
@@ -201,8 +207,14 @@ export const ProjectSelection = ({
               </div>
 
               {selectedProjects.length > 0 && (
-                <div className="mt-6 p-4 bg-green-50 rounded-lg">
-                  <p className="text-sm text-green-700 mb-3">
+                <div
+                  className="mt-6 p-4 bg-green-50 rounded-lg"
+                  data-testid="selected-projects-summary"
+                >
+                  <p
+                    className="text-sm text-green-700 mb-3"
+                    data-testid="selected-projects-count"
+                  >
                     {t("projects.selected", {
                       count: selectedProjects.length,
                       plural: selectedProjects.length !== 1 ? "s" : "",
@@ -223,6 +235,7 @@ export const ProjectSelection = ({
                 onClick={handleContinue}
                 className="w-full mt-6 min-h-12 py-3 text-sm sm:text-base whitespace-normal"
                 disabled={selectedProjects.length === 0}
+                data-testid="continue-to-alert-button"
               >
                 {t("projects.continueToAlert", {
                   count: selectedProjects.length,

tests/pages/AlertFormPage.ts

@@ -12,6 +12,9 @@ export interface AlertFormData {
  * Page Object for the Alert Form page
  */
 export class AlertFormPage extends BasePage {
+  // Container
+  readonly container: Locator;
+
   // Form inputs
   readonly startTimeInput: Locator;
   readonly endTimeInput: Locator;
@@ -33,25 +36,28 @@ export class AlertFormPage extends BasePage {
   constructor(page: Page) {
     super(page);
 
+    // Container
+    this.container = page.locator('[data-testid="alert-form"]');
+
     // Form inputs - use ID selectors for reliability
     this.startTimeInput = page.locator('#startTime');
     this.endTimeInput = page.locator('#endTime');
     this.sourceIdInput = page.locator('#sourceId');
     this.alertNameInput = page.locator('#alertName');
 
     // Buttons
-    this.submitButton = page.locator('button[type="submit"]');
+    this.submitButton = page.locator('[data-testid="alert-submit-button"]');
     this.backButton = page.getByRole('button', { name: /back/i });
 
     // Validation error (inline format error for alert name)
-    this.validationError = page.locator('.text-red-600, .text-destructive');
+    this.validationError = page.locator('[data-testid="alert-validation-error"]');
 
     // Submission error (red error box)
-    this.submissionError = page.locator('.bg-red-50');
+    this.submissionError = page.locator('[data-testid="alert-error-message"]');
 
     // Summary section elements
-    this.coordinatesDisplay = page.locator('text=/[-]?\\d+\\.\\d+.*,.*[-]?\\d+\\.\\d+/');
-    this.selectedProjectsDisplay = page.locator('text=/\\d+\\s+project/i');
+    this.coordinatesDisplay = page.locator('[data-testid="coordinates-display"]');
+    this.selectedProjectsDisplay = page.locator('[data-testid="selected-projects-display"]');
   }
 
   /**
@@ -148,7 +154,7 @@ export class AlertFormPage extends BasePage {
     // Wait for button to not be in "creating" state
     await this.page.waitForFunction(
       () => {
-        const button = document.querySelector('button[type="submit"]');
+        const button = document.querySelector('[data-testid="alert-submit-button"]');
         const text = button?.textContent?.toLowerCase() ?? '';
         return !text.includes('creating');
       },
@@ -163,7 +169,7 @@ export class AlertFormPage extends BasePage {
     // First wait for success state on button
     await this.page.waitForFunction(
       () => {
-        const button = document.querySelector('button[type="submit"]');
+        const button = document.querySelector('[data-testid="alert-submit-button"]');
         const text = button?.textContent?.toLowerCase() ?? '';
         return text.includes('success') || text.includes('created');
       },

tests/pages/ProjectSelectionPage.ts

@@ -6,6 +6,7 @@ import { BasePage } from './BasePage';
  */
 export class ProjectSelectionPage extends BasePage {
   // Locators
+  readonly container: Locator;
   readonly backToMapButton: Locator;
   readonly continueButton: Locator;
   readonly logoutButton: Locator;
@@ -15,23 +16,33 @@ export class ProjectSelectionPage extends BasePage {
   constructor(page: Page) {
     super(page);
 
+    // Container
+    this.container = page.locator('[data-testid="project-selection"]');
+
     // Navigation buttons
     this.backToMapButton = page.getByRole('button', { name: /back.*map/i });
-    this.continueButton = page.getByRole('button', { name: /continue.*alert/i });
+    this.continueButton = page.locator('[data-testid="continue-to-alert-button"]');
     this.logoutButton = page.getByRole('button', { name: /logout/i });
 
     // Loading state
     this.loadingIndicator = page.locator('.animate-spin');
 
     // Selected projects summary (green box showing count and names)
-    this.selectedProjectsSummary = page.locator('.bg-green-50');
+    this.selectedProjectsSummary = page.locator('[data-testid="selected-projects-summary"]');
   }
 
   /**
    * Get all project checkboxes
    */
   getProjectCheckboxes(): Locator {
-    return this.page.getByRole('checkbox');
+    return this.page.locator('[data-testid^="project-checkbox-"]');
+  }
+
+  /**
+   * Get project row by name using data attribute
+   */
+  getProjectRow(projectName: string): Locator {
+    return this.page.locator(`[data-project-name="${projectName}"]`);
   }
 
   /**