From 1292b7c44184d4db2dcf373a18ed11fd4ffb1358 Mon Sep 17 00:00:00 2001
From: Pier-Jean Malandrino <pierjean.malandrino@scub.net>
Date: Sun, 12 Apr 2026 10:03:06 +0200
Subject: [PATCH] fix(e2e): replace fragile index-based toggle selection with
 dedicated selectors

Add dedicated data-e2e selectors (configure-btn, verify-btn, prepare-btn)
to StudioPage toggle buttons and update E2E tests to use waitFor + click
on these selectors instead of locateAll index tricks. Fixes timeout in
rechunk.feature caused by race with async feature flag loading.

Closes #176
---
 .../src/test/resources/analyses/pipeline-options.feature   | 7 +++----
 e2e/ui/src/test/resources/analyses/rechunk.feature         | 6 +++---
 e2e/ui/src/test/resources/workflows/full-ui-path.feature   | 7 +++----
 frontend/src/pages/StudioPage.vue                          | 6 +++---
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/e2e/ui/src/test/resources/analyses/pipeline-options.feature b/e2e/ui/src/test/resources/analyses/pipeline-options.feature
index 1d33609..add592d 100644
--- a/e2e/ui/src/test/resources/analyses/pipeline-options.feature
+++ b/e2e/ui/src/test/resources/analyses/pipeline-options.feature
@@ -51,10 +51,9 @@ Feature: UI — Pipeline configuration options
     * select('[data-e2e=config-select]', 'fast')
 
     # Switch to Verify mode and back
-    * def toggleBtns = locateAll('[data-e2e=toggle-btn]')
-    * toggleBtns[1].click()
-    * waitFor('[data-e2e=toggle-btn].active')
-    * toggleBtns[0].click()
+    * click('[data-e2e~=verify-btn]')
+    * waitFor('[data-e2e~=verify-btn].active')
+    * click('[data-e2e~=configure-btn]')
     * waitFor('[data-e2e=config-select]')
 
     # Verify table mode is still fast
diff --git a/e2e/ui/src/test/resources/analyses/rechunk.feature b/e2e/ui/src/test/resources/analyses/rechunk.feature
index e409343..33ff945 100644
--- a/e2e/ui/src/test/resources/analyses/rechunk.feature
+++ b/e2e/ui/src/test/resources/analyses/rechunk.feature
@@ -25,9 +25,9 @@ Feature: UI — Rechunk an analysis with different parameters
     * call read('classpath:common/helpers/ui-wait-analysis.feature')
     * waitFor('[data-e2e=result-tabs]')
 
-    # Now Préparer toggle should be enabled — click the last one
-    * def toggleBtns = locateAll('[data-e2e=toggle-btn]')
-    * toggleBtns[karate.sizeOf(toggleBtns) - 1].click()
+    # Switch to Prepare tab — use dedicated selector (avoids race with feature flag load)
+    * waitFor('[data-e2e~=prepare-btn]')
+    * click('[data-e2e~=prepare-btn]')
 
     # Wait for chunk panel to load
     * waitFor('[data-e2e=chunk-panel]')
diff --git a/e2e/ui/src/test/resources/workflows/full-ui-path.feature b/e2e/ui/src/test/resources/workflows/full-ui-path.feature
index 6790a53..e2f6bd4 100644
--- a/e2e/ui/src/test/resources/workflows/full-ui-path.feature
+++ b/e2e/ui/src/test/resources/workflows/full-ui-path.feature
@@ -46,8 +46,8 @@ Feature: UI — Full happy path via browser
     * match text('[data-e2e=raw-content]') != ''
 
     # Step 9: Switch to Préparer mode and rechunk
-    * def toggleBtns = locateAll('[data-e2e=toggle-btn]')
-    * toggleBtns[karate.sizeOf(toggleBtns) - 1].click()
+    * waitFor('[data-e2e~=prepare-btn]')
+    * click('[data-e2e~=prepare-btn]')
     * waitFor('[data-e2e=chunk-panel]')
 
     # Expand config if needed
@@ -66,8 +66,7 @@ Feature: UI — Full happy path via browser
     * assert karate.sizeOf(locateAll('[data-e2e=chunk-card]')) > 0
 
     # Step 10: Delete the document via UI
-    * def toggleBtns2 = locateAll('[data-e2e=toggle-btn]')
-    * toggleBtns2[0].click()
+    * click('[data-e2e~=configure-btn]')
     * waitFor('[data-e2e=doc-item]')
 
     # Hover and delete
diff --git a/frontend/src/pages/StudioPage.vue b/frontend/src/pages/StudioPage.vue
index e96769b..2c358f4 100644
--- a/frontend/src/pages/StudioPage.vue
+++ b/frontend/src/pages/StudioPage.vue
@@ -22,7 +22,7 @@
         <div class="mode-toggle">
           <button
             class="toggle-btn"
-            data-e2e="toggle-btn"
+            data-e2e="toggle-btn configure-btn"
             :class="{ active: mode === 'configure' }"
             @click="mode = 'configure'"
           >
@@ -37,7 +37,7 @@
           </button>
           <button
             class="toggle-btn"
-            data-e2e="toggle-btn"
+            data-e2e="toggle-btn verify-btn"
             :class="{ active: mode === 'verify' }"
             @click="mode = 'verify'"
             :disabled="!analysisStore.currentAnalysis"
@@ -54,7 +54,7 @@
           <button
             v-if="chunkingEnabled"
             class="toggle-btn"
-            data-e2e="toggle-btn"
+            data-e2e="toggle-btn prepare-btn"
             :class="{ active: mode === 'prepare' }"
             @click="mode = 'prepare'"
             :disabled="!analysisStore.currentAnalysis"