From eb7871d06ca61ae4c1766a36bd972062b2ee7049 Mon Sep 17 00:00:00 2001
From: Leendert de Borst <ldeborst@xivisoft.com>
Date: Wed, 17 Dec 2025 15:35:14 +0100
Subject: [PATCH] Update browser extension e2e tests (#1404)

---
 .../popup/components/Forms/AddFieldMenu.tsx   |  1 +
 .../popup/pages/credentials/ItemAddEdit.tsx   |  5 +++++
 .../tests/fixtures/TestClient.ts              | 20 +++++++++++++------
 .../tests/fixtures/selectors.ts               | 10 +++++-----
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/apps/browser-extension/src/entrypoints/popup/components/Forms/AddFieldMenu.tsx b/apps/browser-extension/src/entrypoints/popup/components/Forms/AddFieldMenu.tsx
index 76f0f1fe1..af86132ee 100644
--- a/apps/browser-extension/src/entrypoints/popup/components/Forms/AddFieldMenu.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/components/Forms/AddFieldMenu.tsx
@@ -228,6 +228,7 @@ const AddFieldMenu: React.FC<AddFieldMenuProps> = ({
       <div className="relative">
         <button
           type="button"
+          id="add-field-menu"
           onClick={() => setIsOpen(!isOpen)}
           className="w-full px-4 py-2 border-2 border-dashed border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 rounded-md hover:border-primary-500 hover:text-primary-600 dark:hover:text-primary-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors flex items-center justify-center gap-2"
         >
diff --git a/apps/browser-extension/src/entrypoints/popup/pages/credentials/ItemAddEdit.tsx b/apps/browser-extension/src/entrypoints/popup/pages/credentials/ItemAddEdit.tsx
index 37e97e665..79650f9ea 100644
--- a/apps/browser-extension/src/entrypoints/popup/pages/credentials/ItemAddEdit.tsx
+++ b/apps/browser-extension/src/entrypoints/popup/pages/credentials/ItemAddEdit.tsx
@@ -620,6 +620,11 @@ const ItemAddEdit: React.FC = () => {
 
       let updatedItem: Item = {
         ...item,
+        /*
+         * For create mode, always generate a fresh ID to prevent UNIQUE constraint
+         * violations if form persistence restored a previously saved item's ID.
+         */
+        Id: isEditMode ? item.Id : crypto.randomUUID().toUpperCase(),
         Fields: fields,
         UpdatedAt: new Date().toISOString()
       };
diff --git a/apps/browser-extension/tests/fixtures/TestClient.ts b/apps/browser-extension/tests/fixtures/TestClient.ts
index 8993ab444..0347c4c23 100644
--- a/apps/browser-extension/tests/fixtures/TestClient.ts
+++ b/apps/browser-extension/tests/fixtures/TestClient.ts
@@ -176,6 +176,8 @@ export class TestClient {
    */
   async goToVault(): Promise<this> {
     await this.popup.locator('#nav-vault').click();
+    // Wait for the vault list to be ready (items list or add button visible)
+    await this.popup.locator(ButtonSelectors.ADD_NEW_ITEM).waitFor({ state: 'visible', timeout: Timeouts.MEDIUM });
     return this;
   }
 
@@ -249,7 +251,7 @@ export class TestClient {
    */
   async clickCredential(name: string): Promise<this> {
     await this.popup.locator(`text=${name}`).click();
-    await this.popup.locator('button[title="Edit Credential"]').waitFor({ state: 'visible', timeout: Timeouts.SHORT });
+    await this.popup.locator(ButtonSelectors.EDIT_ITEM).waitFor({ state: 'visible', timeout: Timeouts.SHORT });
     return this;
   }
 
@@ -257,7 +259,7 @@ export class TestClient {
    * Open the edit form for the currently viewed credential.
    */
   async openEditForm(): Promise<this> {
-    const editButton = this.popup.locator(ButtonSelectors.EDIT_CREDENTIAL);
+    const editButton = this.popup.locator(ButtonSelectors.EDIT_ITEM);
     await expect(editButton).toBeVisible({ timeout: Timeouts.SHORT });
     await editButton.click();
     await expect(this.popup.locator(FieldSelectors.LOGIN_USERNAME)).toBeVisible({ timeout: Timeouts.MEDIUM });
@@ -297,11 +299,17 @@ export class TestClient {
 
     if (!isVisible) {
       // Click the add field menu button (dashed border button)
-      await this.popup.click(ButtonSelectors.ADD_FIELD_MENU);
-      // Click the Notes option in the dropdown
-      await this.popup.click('button:has-text("Notes")');
+      const addFieldButton = this.popup.locator(ButtonSelectors.ADD_FIELD_MENU);
+      await expect(addFieldButton).toBeVisible({ timeout: Timeouts.SHORT });
+      await addFieldButton.click();
+
+      // Wait for menu to appear and click the Notes option
+      const notesOption = this.popup.locator('button:has-text("Notes")');
+      await expect(notesOption).toBeVisible({ timeout: Timeouts.SHORT });
+      await notesOption.click();
+
       // Wait for notes field to appear
-      await expect(this.popup.locator(FieldSelectors.LOGIN_NOTES)).toBeVisible({ timeout: Timeouts.SHORT });
+      await expect(this.popup.locator(FieldSelectors.LOGIN_NOTES)).toBeVisible({ timeout: Timeouts.MEDIUM });
     }
 
     return this.fillField(FieldSelectors.LOGIN_NOTES, notes);
diff --git a/apps/browser-extension/tests/fixtures/selectors.ts b/apps/browser-extension/tests/fixtures/selectors.ts
index 418b2f123..1e5a05870 100644
--- a/apps/browser-extension/tests/fixtures/selectors.ts
+++ b/apps/browser-extension/tests/fixtures/selectors.ts
@@ -17,7 +17,7 @@ export const FieldKey = {
   LoginUsername: 'login.username',
   LoginPassword: 'login.password',
   LoginUrl: 'login.url',
-  MetadataNotes: 'metadata.notes',
+  NotesContent: 'notes.content',
   CardNumber: 'card.number',
   CardCardholderName: 'card.cardholder_name',
   CardExpiryMonth: 'card.expiry_month',
@@ -53,8 +53,8 @@ export const FieldSelectors = {
   LOGIN_PASSWORD: `input#${escapeFieldKey(FieldKey.LoginPassword)}`,
   LOGIN_URL: `input#${escapeFieldKey(FieldKey.LoginUrl)}-0`, // Multi-value field uses -0 suffix for first entry
 
-  // Metadata fields (shared across item types)
-  LOGIN_NOTES: `textarea#${escapeFieldKey(FieldKey.MetadataNotes)}`,
+  // Notes field (shared across item types)
+  LOGIN_NOTES: `textarea#${escapeFieldKey(FieldKey.NotesContent)}`,
 
   // Card fields
   CARD_NUMBER: `input#${escapeFieldKey(FieldKey.CardNumber)}`,
@@ -82,7 +82,7 @@ export const FieldSelectors = {
  */
 export const ButtonSelectors = {
   ADD_NEW_ITEM: 'button[title="Add new item"]',
-  EDIT_CREDENTIAL: 'button[title="Edit Credential"]',
+  EDIT_ITEM: 'button[title="Edit Item"]',
   SAVE: 'button#save-credential',
-  ADD_FIELD_MENU: 'button.border-dashed',
+  ADD_FIELD_MENU: 'button#add-field-menu',
 } as const;