diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..43d8381
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,151 @@
+# AGENTS.md
+
+Instructions for AI coding agents working in this repository. This is the single source of agent guidance — there is no separate CLAUDE.md.
+
+## Project
+
+**Exploratory Testing Chrome Extension** — Manifest V3 extension for web exploratory testing. Testers record Bugs, Notes, Ideas and Questions (optionally with a cropped, annotated screenshot) while browsing; the current URL is captured automatically. Sessions are reviewed in an HTML report and exported to JSON, CSV or standalone HTML.
+
+- Published on the [Chrome Web Store](https://chrome.google.com/webstore/detail/exploratory-testing-chrom/khigmghadjljgjpamimgjjmpmlbgmekj). Version lives in `manifest.json`.
+- Plain JavaScript (ES modules in the service worker and `src/`, jQuery in UI code). **No bundler, no build step, no npm runtime dependencies** — the repo root is the extension.
+- Some code comments and `test/e2e/README.md` are in Spanish. Write new code, comments and docs in English.
+
+## Quick start
+
+Requires Node 20 (matches CI).
+
+```bash
+npm install                 # dev deps only: Jest, Babel, Playwright
+npx playwright install chromium   # first time, for E2E
+npm test                    # unit tests — must pass before finishing any task
+```
+
+Load the extension manually: `chrome://extensions` → Developer mode → **Load unpacked** → repo root. After editing `background.js` or `manifest.json`, click reload on the extension card; popup/report changes only need reopening.
+
+## Commands
+
+| Command | What it does |
+|---------|--------------|
+| `npm test` | Jest unit tests (`test/spec/`) |
+| `npx jest test/spec/Session.test.js` | Single unit test file |
+| `npx jest --coverage` | Coverage for `src/**` into `coverage/` |
+| `npm run test:e2e` | Playwright: smoke + basic functionality |
+| `npm run test:e2e:all` | Playwright: full suite (same set as CI) |
+| `npm run test:e2e:headed` | E2E with visible browser |
+| `npm run test:e2e:ui` / `:debug` | Playwright UI mode / step debugger |
+| `npm run test:e2e:crop` | Crop-screenshot specs, headed |
+| `npm run test:e2e:report` | Open last HTML report |
+| `npm run test:all` | Unit + full E2E |
+| `.\genetareZip.ps1` | Build `ETExtension-<timestamp>.zip` for Web Store upload (PowerShell, runtime files only) |
+| `.\start_test_server.ps1` | `python -m http.server 8000` serving the repo; open `/test/e2e/test-pages/index.html` |
+
+## Architecture
+
+```
+popup.html / js/popup.js ──sendMessage──▶ background.js (service worker)
+                                            │  holds Session, persists to chrome.storage.local
+                                            │  injects + messages ▼
+                                         js/content_script.js (all URLs)
+                                            │  crop selection overlay
+                                            └─ iframe ▶ js/annotation_editor.html/.js
+HTMLReport/preview.html ── reads session ── renders stats, charts, filterable table
+```
+
+| Path | Role |
+|------|------|
+| `manifest.json` | MV3 manifest. Permissions: `storage`, `tabs`, `activeTab`, `downloads`, `scripting`, `notifications` |
+| `background.js` | Service worker (`type: module`). Owns the `Session`, routes messages, saves to storage, triggers downloads, shows notifications |
+| `popup.html`, `js/popup.js` | Popup UI: annotation forms, counters, export/import/clear, open report |
+| `js/content_script.js` | Crop-area selection on the page; hosts the annotation editor iframe |
+| `js/annotation_editor.*` | Screenshot editor (arrow, rectangle, text, blur, undo). Talks to the content script via `postMessage` (`initAnnotationEditor`, `annotationComplete`, `annotationCancelled`) |
+| `src/Session.js` | Session model: browser info, start time, `annotations[]` |
+| `src/Annotation.js` | `Annotation` base + `Bug`, `Note`, `Idea`, `Question` |
+| `src/browserInfo.js` | `getSystemInfo()` — OS, browser, cookies |
+| `src/JSonSessionService.js` | Session ⇄ JSON (import rebuilds class instances) |
+| `src/ExportSessionCSV.js` | CSV export |
+| `HTMLReport/preview.*` + `modules/` | Report: `reportData` (load), `reportUI` (render), `reportEvents` (filters/actions), `reportDownload` (HTML/ZIP export) |
+
+### Messages handled by `background.js`
+
+All use `chrome.runtime.sendMessage({ type, ... })`, dispatched in the `switch (request.type)` of the `onMessage` listener.
+
+| `type` | Sender | Purpose |
+|--------|--------|---------|
+| `addBug`, `addNote`, `addIdea`, `addQuestion` | popup | Add annotation (optional screenshot) |
+| `updateAnnotationName`, `deleteAnnotation` | report | Edit / remove annotation |
+| `exportSessionCSV`, `exportSessionJSon`, `importSessionJSon` | popup | Export via `chrome.downloads` / import |
+| `clearSession`, `getSessionData`, `getFullSession` | popup, report | Session lifecycle and reads |
+| `initiateCropSelection` | popup | Inject content script and send it `startSelection` (blocked on `chrome://`, `edge://`, `about:`, extension pages) |
+| `requestCropScreenshot` | content script | `captureVisibleTab` + crop; async response |
+| `csToBgCropData` | content script | Store annotated crop as a new annotation |
+
+Content script also sends `selectionCancelled` (not handled by background).
+
+**Adding a message:** add a `case` in `background.js`; if it responds asynchronously set `isAsync = true` so the listener returns `true`; send it from the caller; add unit tests for any `src/` logic and an E2E spec for the user flow.
+
+### Storage and persistence
+
+- Whole session saved under key `session` in `chrome.storage.local`, restored on service-worker start. The service worker can be killed at any time — never keep state only in memory.
+- On `QUOTA_BYTES` errors, `saveSession()` strips the oldest screenshots and retries, notifying the user. Preserve this when touching persistence.
+- Stored/imported data is plain JSON; rebuild `Bug`/`Note`/`Idea`/`Question` instances through `JSonSessionService` rather than using raw objects.
+
+### HTML report downloads
+
+- **Download Report** — single self-contained HTML, screenshots inlined as base64, must work offline.
+- **Download Images** — ZIP (JSZip) of screenshots named by type + timestamp, plus `README.txt`. Only offered in `preview.html`; deliberately omitted from downloaded reports to avoid Windows security warnings.
+
+## Testing
+
+### Unit (Jest)
+
+- Jest 29 + `babel-jest`, `testEnvironment: 'node'`, specs in `test/spec/**/*.test.js`. Currently 5 suites / 52 tests, all passing.
+- `jest.setup.js` mocks a minimal `chrome` (`runtime.getManifest`, `storage.local.get/set`, `tabs.query`) and `navigator`, and loads `lib/date.js`. **When code under test calls a new `chrome.*` API, add its mock there.**
+- Unit tests cover `src/` only. `background.js`, popup and report logic are covered by E2E — keep business logic in `src/` so it stays unit-testable.
+
+### E2E (Playwright)
+
+- Specs in `test/e2e/*.spec.js`: `smoke`, `basic-functionality`, `reports-export`, `crop-screenshot`, `annotation-editor`. Shared setup in `test/e2e/helpers/extension-helper.js`; fixture pages in `test/e2e/test-pages/` (served at `http://localhost:8000/test/e2e/test-pages`).
+- Runs one worker, not parallel (extensions require a persistent Chromium context). Retries 2× on CI.
+- `npm run` scripts list spec files explicitly — **a new spec must be added to `test:e2e:all` and `test:e2e:ci` in `package.json`** or CI won't run it.
+- Prefer role / label / test-id selectors over CSS paths; use Playwright's auto-waiting assertions, never fixed sleeps.
+- When asserting on `postMessage` traffic, register the listener (and await it) *before* triggering the action — see `listenForEditorMessage` in `annotation-editor.spec.js`.
+
+### CI
+
+`.github/workflows/ci.yml`: unit tests + `npm run test:e2e:ci` on every push and on PRs to `main`/`master`. Playwright report uploaded as artifact.
+
+## Agent-specific tooling
+
+If your agent supports these, use them:
+
+- **UI / CSS changes** — follow the `frontend-design` skill (`.claude/skills/frontend-design/SKILL.md`, mirrored in `.agents/skills/`).
+- **E2E tests** — use the `playwright-cli` skill (`.claude/skills/playwright-cli/`) to explore the UI, generate selectors and draft specs; hand-write only what it can't produce.
+- **Library / API docs** — look up current docs (e.g. Context7 MCP) before writing code against Chrome APIs, Playwright, Jest or Chart.js rather than relying on memory.
+
+## Conventions
+
+- Match surrounding style: ES classes + named exports in `src/`, jQuery in popup/report code. No new frameworks.
+- No runtime npm dependencies. If a library is truly needed, vendor a pinned minified copy in `lib/` and justify it.
+- MV3 rules: no remote code, no `eval`/`new Function`, no inline `<script>` in extension pages (CSP).
+- Keep permissions minimal — each new one triggers a Web Store review warning and needs a clear reason.
+- Treat page content and imported JSON as untrusted: insert user text with `.text()` / `textContent`, not `.html()` / `innerHTML`.
+- Commits: Conventional Commits (`feat:`, `fix:`, `test:`, `refactor:`, `chore:`, `docs:`).
+- Bump `manifest.json` `version` only when preparing a release.
+
+## Do not edit
+
+- Vendored libraries: `lib/*`, `js/jquery-1.11.3.min.js`, `js/bootstrap.bundle.min.js`, `css/bootstrap.min.css`, `HTMLReport/TableFilter/`
+- Generated / ignored: `playwright-report/`, `test-results/`, `coverage/`, `test/e2e/.chrome-profile/`, `ETExtension-*.zip`
+
+## Gotchas
+
+- `genetareZip.ps1` (filename typo is real) packages an **allowlist** of runtime files (`manifest.json`, `background.js`, `popup.html`, `css`, `HTMLReport`, `icons`, `images`, `js`, `lib`, `src`). A new top-level runtime file or folder must be added to `$include`, or it will be missing from the store package.
+- `README.md` still claims `ExportSessionCSV.test.js` is broken — it now passes.
+
+## Definition of done
+
+1. `npm test` passes.
+2. Relevant E2E specs pass (`npm run test:e2e:all` for UI / message-flow changes).
+3. New `chrome.*` calls are mocked in `jest.setup.js`; new specs are wired into `package.json`.
+4. Extension reloaded and the change checked manually in Chrome when it affects UI.
+5. This file updated if architecture, commands or conventions changed.
diff --git a/CLAUDE.md b/CLAUDE.md
deleted file mode 100644
index f7d1de6..0000000
--- a/CLAUDE.md
+++ /dev/null
@@ -1,126 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Skills to use
-
-Always reference these skills when working on the codebase:
-
-- `.claude/skills/frontend-design/skill.md` for all CSS changes and UI componentes
-
-When working with E2E tests:
-- **ALWAYS** use the `playwright-cli` skill for:
-  - Generating new tests
-  - Exploring UI elements
-  - Creating selectors
-  - Capturing screenshots
-- Only write tests manually when the skill can't handle the specific case
-
-- Always use context7 when I need code generation, setup or configuration steps, or
-library/API documentation. This means you should automatically use the Context7 MCP
-tools to resolve library id and get library docs without me having to explicitly ask.
-
-
-## Project Overview
-
-Exploratory Testing Chrome Extension (Manifest v3) - A tool for web exploratory testing that allows testers to report bugs, ideas, notes, and questions with screenshots during testing sessions.
-
-## Build and Test Commands
-
-```bash
-npm install              # Install dependencies
-npm test                 # Run Jest tests
-npx jest                 # Run Jest directly
-npx jest --watch         # Run tests in watch mode
-npx jest path/to/test    # Run a single test file
-```
-
-**PowerShell scripts:**
-```powershell
-.\genetareZip.ps1        # Create timestamped .zip for Chrome Web Store
-.\start_test_server.ps1  # Start HTTP server on localhost:8000
-```
-
-## Architecture
-
-### Chrome Extension Structure (Manifest v3)
-
-- **Service Worker** (`background.js`): Handles message passing, storage, and session management
-- **Popup** (`popup.html` + `js/popup.js`): User-facing UI for creating annotations
-- **Content Script** (`js/content_script.js`): Handles screenshot cropping on pages
-
-### Core Data Model
-
-```
-Session
-├── BrowserInfo (os, browser version, cookies enabled)
-├── StartDateTime
-└── annotations[]
-    ├── Bug (extends Annotation)
-    ├── Note (extends Annotation)
-    ├── Idea (extends Annotation)
-    └── Question (extends Annotation)
-```
-
-### Key Source Files
-
-| File | Purpose |
-|------|---------|
-| `src/Session.js` | Main session management class |
-| `src/Annotation.js` | Annotation base class and subclasses (Bug, Note, Idea, Question) |
-| `src/browserInfo.js` | System/browser information collector |
-| `src/JSonSessionService.js` | JSON serialization/deserialization |
-| `src/ExportSessionCSV.js` | CSV export functionality |
-
-### Message Passing Protocol
-
-Communication between popup and background:
-- `addBug`, `addIdea`, `addNote`, `addQuestion`: Add annotation with optional screenshot
-- `updateAnnotationName`, `deleteAnnotation`: Modify annotations
-- `exportSessionCSV`, `exportSessionJSon`, `importSessionJSon`: Import/export
-- `clearSession`, `getSessionData`, `getFullSession`: Session management
-- `csToBgCropData`: Process cropped screenshot from content script
-
-### Storage
-
-Uses `chrome.storage.local` for persistence. The extension handles quota errors gracefully by removing oldest screenshots when storage is full.
-
-## Testing
-
-- **Framework**: Jest 29.7.0
-- **Test location**: `test/spec/**/*.test.js`
-- **Chrome API mocks**: Defined in `jest.setup.js`
-
-When adding new Chrome API calls, update the mocks in `jest.setup.js`.
-
-**Known issue**: `test/spec/ExportSessionCSV.test.js` has syntax errors and needs fixing.
-
-## Technology Stack
-
-- jQuery 1.11.3, Bootstrap CSS (frontend)
-- Jest + Babel (testing/transpilation)
-- CanvasJS, Chart.js, TableFilter, JSZip (reporting)
-- No npm runtime dependencies (all libraries bundled in `lib/`)
-
-## HTML Report Features
-
-### Report Downloads
-
-The HTML report (`HTMLReport/preview.html`) supports two download options:
-
-1. **Download Report**: Generates a standalone HTML file with all resources embedded
-   - Contains all screenshots as embedded base64 images
-   - Fully self-contained and portable
-   - Can be opened offline without any dependencies
-
-2. **Download Images**: Creates a ZIP file with all screenshots
-   - **Only available in preview.html** (the initial report view)
-   - NOT available in downloaded HTML reports (to avoid Windows security warnings)
-   - Includes a README.txt file with session information
-   - Screenshots are named with type and timestamp
-
-### Libraries
-
-All external libraries are bundled locally in `lib/` for Chrome Extension CSP compliance:
-- `chart.umd.js`: Chart.js for data visualization
-- `jszip.min.js`: JSZip for creating ZIP archives
diff --git a/genetareZip.ps1 b/genetareZip.ps1
index 0032d9b..25c9133 100644
--- a/genetareZip.ps1
+++ b/genetareZip.ps1
@@ -1,11 +1,38 @@
+# Builds the Chrome Web Store package.
+# Uses an allowlist of runtime files so dev tooling (.claude, .github, tests,
+# configs, reports...) never ends up in the published extension.
+# If you add a new runtime file or folder, add it here.
+$ErrorActionPreference = "Stop"
+
 # target path
-$path = "."
+$path = $PSScriptRoot
 # construct archive path
 $DateTime = (Get-Date -Format "yyyyMMddHHmmss")
-$destination = Join-Path $path ".\ETExtension-$DateTime.zip"
-# exclusion rules. Can use wild cards (*)
-$exclude = @("_*.config","ARCHIVE","*.zip","test","screenshots", ".gitignore",".\.git","*.ps1","node_modules")
-# get files to compress using exclusion filer
-$files = Get-ChildItem -Path $path -Exclude $exclude
+$destination = Join-Path $path "ETExtension-$DateTime.zip"
+
+# files and folders that make up the extension at runtime
+$include = @(
+    "manifest.json",
+    "background.js",
+    "popup.html",
+    "css",
+    "HTMLReport",
+    "icons",
+    "images",
+    "js",
+    "lib",
+    "src"
+)
+
+# fail early if anything in the allowlist is missing
+$files = foreach ($item in $include) {
+    $fullPath = Join-Path $path $item
+    if (-not (Test-Path $fullPath)) {
+        throw "Missing runtime file or folder: $item"
+    }
+    $fullPath
+}
+
 # compress
-Compress-Archive -Path $files -DestinationPath $destination -CompressionLevel Optimal
\ No newline at end of file
+Compress-Archive -Path $files -DestinationPath $destination -CompressionLevel Optimal
+Write-Host "Created $destination"
diff --git a/package.json b/package.json
index 03a03b1..01f14b1 100644
--- a/package.json
+++ b/package.json
@@ -19,13 +19,13 @@
   "scripts": {
     "test": "jest",
     "test:e2e": "playwright test smoke.spec.js basic-functionality.spec.js",
-    "test:e2e:all": "playwright test smoke.spec.js basic-functionality.spec.js reports-export.spec.js crop-screenshot.spec.js",
+    "test:e2e:all": "playwright test smoke.spec.js basic-functionality.spec.js reports-export.spec.js crop-screenshot.spec.js annotation-editor.spec.js",
     "test:e2e:headed": "cross-env HEADED=true playwright test smoke.spec.js basic-functionality.spec.js",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:debug": "playwright test smoke.spec.js basic-functionality.spec.js --debug",
     "test:e2e:report": "playwright show-report",
     "test:e2e:crop": "cross-env HEADED=true playwright test crop-screenshot.spec.js",
-    "test:e2e:ci": "playwright test smoke.spec.js basic-functionality.spec.js reports-export.spec.js crop-screenshot.spec.js",
+    "test:e2e:ci": "playwright test smoke.spec.js basic-functionality.spec.js reports-export.spec.js crop-screenshot.spec.js annotation-editor.spec.js",
     "test:all": "npm test && npm run test:e2e:all"
   },
   "repository": {
diff --git a/start_test_server.ps1 b/start_test_server.ps1
index 0a7f138..03092bc 100644
--- a/start_test_server.ps1
+++ b/start_test_server.ps1
@@ -7,6 +7,6 @@ if ($LASTEXITCODE -ne 0) {
 
 # Iniciar el servidor HTTP
 Write-Host "Iniciando servidor de pruebas en http://localhost:8000"
-Write-Host "Abre http://localhost:8000/test/SpecRunner.html en tu navegador"
+Write-Host "Abre http://localhost:8000/test/e2e/test-pages/index.html en tu navegador"
 Write-Host "Presiona Ctrl+C para detener el servidor"
 python -m http.server 8000 
\ No newline at end of file
diff --git a/test/e2e/annotation-editor.spec.js b/test/e2e/annotation-editor.spec.js
index 8c8ccd0..e66d5bc 100644
--- a/test/e2e/annotation-editor.spec.js
+++ b/test/e2e/annotation-editor.spec.js
@@ -6,6 +6,23 @@ const {
   waitForStorageUpdate,
 } = require('./helpers/extension-helper');
 
+/**
+ * Registers a window 'message' listener in the editor page and resolves once
+ * it is attached, so the action that triggers the message can run afterwards
+ * without racing the listener registration.
+ * @returns {() => Promise<object>} waits for the first message of the given type
+ */
+async function listenForEditorMessage(page, type) {
+  await page.evaluate((expectedType) => {
+    window.__editorMessage = new Promise((resolve) => {
+      window.addEventListener('message', (event) => {
+        if (event.data && event.data.type === expectedType) resolve(event.data);
+      });
+    });
+  }, type);
+  return () => page.evaluate(() => window.__editorMessage);
+}
+
 /**
  * Annotation Editor Tests
  *
@@ -312,21 +329,13 @@ test.describe('Annotation Editor Functionality', () => {
     }, testImageData);
     await editorPage.waitForTimeout(500);
 
-    // Listen for postMessage
-    const messagePromise = editorPage.evaluate(() => {
-      return new Promise((resolve) => {
-        window.addEventListener('message', (event) => {
-          if (event.data.type === 'annotationComplete') {
-            resolve(event.data);
-          }
-        });
-      });
-    });
+    // Register the listener before triggering the action to avoid missing the message
+    const waitForMessage = await listenForEditorMessage(editorPage, 'annotationComplete');
 
     // Click save with annotations
     await editorPage.click('#save-with-annotations');
 
-    const message = await messagePromise;
+    const message = await waitForMessage();
 
     expect(message.type).toBe('annotationComplete');
     expect(message.imageData).toBeTruthy();
@@ -356,21 +365,13 @@ test.describe('Annotation Editor Functionality', () => {
     }, testImageData);
     await editorPage.waitForTimeout(500);
 
-    // Listen for postMessage
-    const messagePromise = editorPage.evaluate(() => {
-      return new Promise((resolve) => {
-        window.addEventListener('message', (event) => {
-          if (event.data.type === 'annotationComplete') {
-            resolve(event.data);
-          }
-        });
-      });
-    });
+    // Register the listener before triggering the action to avoid missing the message
+    const waitForMessage = await listenForEditorMessage(editorPage, 'annotationComplete');
 
     // Click save without annotations
     await editorPage.click('#save-without-annotations');
 
-    const message = await messagePromise;
+    const message = await waitForMessage();
 
     expect(message.type).toBe('annotationComplete');
     expect(message.imageData).toBe(testImageData);
@@ -391,21 +392,13 @@ test.describe('Annotation Editor Functionality', () => {
     await editorPage.goto(editorUrl);
     await editorPage.waitForLoadState('domcontentloaded');
 
-    // Listen for postMessage
-    const messagePromise = editorPage.evaluate(() => {
-      return new Promise((resolve) => {
-        window.addEventListener('message', (event) => {
-          if (event.data.type === 'annotationCancelled') {
-            resolve(event.data);
-          }
-        });
-      });
-    });
+    // Register the listener before triggering the action to avoid missing the message
+    const waitForMessage = await listenForEditorMessage(editorPage, 'annotationCancelled');
 
     // Click cancel
     await editorPage.click('#cancel-button');
 
-    const message = await messagePromise;
+    const message = await waitForMessage();
 
     expect(message.type).toBe('annotationCancelled');
 
@@ -424,21 +417,13 @@ test.describe('Annotation Editor Functionality', () => {
     await editorPage.goto(editorUrl);
     await editorPage.waitForLoadState('domcontentloaded');
 
-    // Listen for postMessage
-    const messagePromise = editorPage.evaluate(() => {
-      return new Promise((resolve) => {
-        window.addEventListener('message', (event) => {
-          if (event.data.type === 'annotationCancelled') {
-            resolve(event.data);
-          }
-        });
-      });
-    });
+    // Register the listener before triggering the action to avoid missing the message
+    const waitForMessage = await listenForEditorMessage(editorPage, 'annotationCancelled');
 
     // Press Escape
     await editorPage.keyboard.press('Escape');
 
-    const message = await messagePromise;
+    const message = await waitForMessage();
 
     expect(message.type).toBe('annotationCancelled');
 
@@ -464,21 +449,13 @@ test.describe('Annotation Editor Functionality', () => {
     }, testImageData);
     await editorPage.waitForTimeout(500);
 
-    // Listen for postMessage
-    const messagePromise = editorPage.evaluate(() => {
-      return new Promise((resolve) => {
-        window.addEventListener('message', (event) => {
-          if (event.data.type === 'annotationComplete') {
-            resolve(event.data);
-          }
-        });
-      });
-    });
+    // Register the listener before triggering the action to avoid missing the message
+    const waitForMessage = await listenForEditorMessage(editorPage, 'annotationComplete');
 
     // Press Ctrl+Enter
     await editorPage.keyboard.press('Control+Enter');
 
-    const message = await messagePromise;
+    const message = await waitForMessage();
 
     expect(message.type).toBe('annotationComplete');
     expect(message.hasAnnotations).toBe(true);
@@ -534,19 +511,12 @@ test.describe('Annotation Editor Functionality', () => {
     console.log('✓ Multiple annotations drawn successfully');
 
     // Save and verify all annotations are in the image
-    const messagePromise = editorPage.evaluate(() => {
-      return new Promise((resolve) => {
-        window.addEventListener('message', (event) => {
-          if (event.data.type === 'annotationComplete') {
-            resolve(event.data);
-          }
-        });
-      });
-    });
+    // Register the listener before triggering the action to avoid missing the message
+    const waitForMessage = await listenForEditorMessage(editorPage, 'annotationComplete');
 
     await editorPage.click('#save-with-annotations');
 
-    const message = await messagePromise;
+    const message = await waitForMessage();
 
     expect(message.type).toBe('annotationComplete');
     expect(message.hasAnnotations).toBe(true);