From 5e81dd9deba66d0d9b761c1e75da588d77883b46 Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Mon, 4 Aug 2025 21:05:27 -0400
Subject: [PATCH] Add test ID to group header for E2E test reliability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update group header component to include data-testid for improved test targeting
and update Page Object Model to use the more reliable test ID selector.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/app/groups/[groupId]/group-header.tsx | 4 +++-
 tests/pom/group-page.ts                   | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/groups/[groupId]/group-header.tsx b/src/app/groups/[groupId]/group-header.tsx
index 49c741c..1ecd975 100644
--- a/src/app/groups/[groupId]/group-header.tsx
+++ b/src/app/groups/[groupId]/group-header.tsx
@@ -16,7 +16,9 @@ export const GroupHeader = () => {
           {isLoading ? (
             <Skeleton className="mt-1.5 mb-1.5 h-5 w-32" />
           ) : (
-            <div className="flex">{group.name}</div>
+            <div className="flex" data-testid="group-name">
+              {group.name}
+            </div>
           )}
         </Link>
       </h1>
diff --git a/tests/pom/group-page.ts b/tests/pom/group-page.ts
index 40ad59c..2be8304 100644
--- a/tests/pom/group-page.ts
+++ b/tests/pom/group-page.ts
@@ -6,7 +6,7 @@ export class GroupPage {
 
   constructor(page: Page) {
     this.page = page
-    this.title = page.getByRole('main').getByRole('heading', { level: 1 })
+    this.title = page.getByTestId('group-name')
   }
 
   async createExpense() {