test(e2e): stabilize PhotoBuilder session-resumption flow in CI

test(e2e): stabilize PhotoBuilder session-resumption flow in CI

Fix flaky PhotoBuilder e2e behavior by making “Start Over” test targeting deterministic instead of DOM-order dependent. Assign distinct test IDs to overlay vs main Start Over controls, update Playwright assertions/clicks to use the visible main control, and ignore root-level test-results artifacts to prevent accidental git noise.

Author: manuelkiessling

.github/workflows/ci.yml

@@ -12,6 +12,7 @@ on:
 env:
     ETFS_PROJECT_NAME: ci
     APP_IMAGE: ghcr.io/${{ github.repository }}/app:ci
+    CACHE_REF: ghcr.io/${{ github.repository }}/app:buildcache
 
 jobs:
     build-app-image:
@@ -37,8 +38,12 @@ jobs:
                   file: docker/app/Dockerfile
                   push: true
                   tags: ${{ env.APP_IMAGE }}
-                  cache-from: type=gha
-                  cache-to: type=gha,mode=max
+                  cache-from: |
+                      type=gha
+                      type=registry,ref=${{ env.CACHE_REF }}
+                  cache-to: |
+                      type=gha,mode=max
+                      type=registry,ref=${{ env.CACHE_REF }},mode=max
 
     build-frontend:
         name: Frontend build

.gitignore

@@ -55,6 +55,7 @@ public/workspaces/*
 # E2E Playwright (tests/End2End)
 /tests/End2End/playwright-report/
 /tests/End2End/test-results/
+/test-results/
 
 # Generated conversation log viewer files (in project root)
 /conversation-log-*.html

src/PhotoBuilder/Presentation/Controller/PhotoBuilderController.php

@@ -116,7 +116,7 @@ public function show(
 
         $effectiveProvider = $project->getEffectivePhotoBuilderLlmModelProvider();
 
-        return $this->render('@photo_builder.presentation/photo_builder.twig', [
+        $response = $this->render('@photo_builder.presentation/photo_builder.twig', [
             'workspace'                     => $workspace,
             'project'                       => $project,
             'pagePath'                      => $pagePath,
@@ -129,6 +129,9 @@ public function show(
             'supportsResolutionToggle'      => $effectiveProvider === LlmModelProvider::Google,
             'existingSessionId'             => $existingSession?->getId(),
         ]);
+        $response->headers->set('Cache-Control', 'no-store, no-cache, must-revalidate');
+
+        return $response;
     }
 
     /**

src/PhotoBuilder/Presentation/Resources/templates/photo_builder.twig

@@ -83,7 +83,7 @@
                     </p>
                     <button {{ stimulus_target('photo-builder', 'startOverButton') }}
                             {{ stimulus_action('photo-builder', 'startOver') }}
-                            data-test-id="photo-builder-start-over-button"
+                            data-test-id="photo-builder-start-over-button-overlay"
                             type="button"
                             class="hidden etfswui-button-secondary text-sm">
                         {{ 'photo_builder.start_over'|trans }}
@@ -182,7 +182,7 @@ For each image, call the deliver_image_prompt tool with:
                                 </button>
                                 <button {{ stimulus_target('photo-builder', 'startOverButton') }}
                                         {{ stimulus_action('photo-builder', 'startOver') }}
-                                        data-test-id="photo-builder-start-over-button"
+                                        data-test-id="photo-builder-start-over-button-main"
                                         type="button"
                                         class="hidden etfswui-button-secondary gap-2">
                                     {{ 'photo_builder.start_over'|trans }}

tests/End2End/tests/photo-builder.spec.ts

@@ -52,18 +52,20 @@ test.describe("photo builder session resumption", () => {
         // 6. Navigate away
         await page.goto("/en/projects");
 
-        // 7. Navigate back to the same photo builder URL
-        await page.goto(photoBuilderUrl!);
+        // 7. Navigate back to the same photo builder URL (cache-bust so we get fresh HTML with existingSessionId)
+        const revisitUrl = photoBuilderUrl! + (photoBuilderUrl!.includes("?") ? "&" : "?") + "_=" + Date.now();
+        await page.goto(revisitUrl);
 
         // 8. "Start Over" buttons are visible (session was resumed)
         await expect(page.getByTestId("photo-builder-page")).toBeVisible();
-        await expect(page.locator('[data-test-id="photo-builder-start-over-button"]').first()).toBeVisible({
+        await expect(page.getByTestId("photo-builder-start-over-button-main")).toBeVisible({
             timeout: 10_000,
         });
 
         // 9. Click "Start Over" → loading overlay shown, Start Over buttons hidden
-        await page.locator('[data-test-id="photo-builder-start-over-button"]').first().click();
+        await page.getByTestId("photo-builder-start-over-button-main").click();
         await expect(page.getByTestId("photo-builder-loading-overlay")).toBeVisible();
-        await expect(page.locator('[data-test-id="photo-builder-start-over-button"]').first()).toBeHidden();
+        await expect(page.getByTestId("photo-builder-start-over-button-main")).toBeHidden();
+        await expect(page.getByTestId("photo-builder-start-over-button-overlay")).toBeHidden();
     });
 });