refactor: improve element interactions in preferences and fix playwright tests (#6894)

tests/preferences/autosave/autosave.spec.ts

@@ -33,22 +33,29 @@ test.describe('Autosave', () => {
     });
 
     await test.step('Enable autosave in preferences', async () => {
-      // Open preferences
+      // Open preferences tab
       await page.locator('.status-bar button[data-trigger="preferences"]').click();
 
-      const preferencesModal = page.locator('.bruno-modal-card').filter({ hasText: 'Preferences' });
-      await expect(preferencesModal).toBeVisible();
+      // Wait for preferences tab to be visible
+      await page.waitForTimeout(500);
+
+      // Navigate to General tab (should be default, but ensure it)
+      await page.getByRole('tab', { name: 'General' }).click();
 
       // Enable autosave checkbox
-      const autoSaveCheckbox = preferencesModal.locator('#autoSaveEnabled');
+      const autoSaveCheckbox = page.locator('#autoSaveEnabled');
       await autoSaveCheckbox.check();
 
       // Wait for auto-save to complete (debounce is 500ms)
       await page.waitForTimeout(1000);
 
-      // Close preferences modal
-      await preferencesModal.locator('[data-testid="modal-close-button"]').click();
-      await expect(preferencesModal).not.toBeVisible();
+      // Close preferences tab using the close icon
+      const preferencesTab = page.locator('.request-tab').filter({ hasText: 'Preferences' });
+      await preferencesTab.hover();
+      await preferencesTab.locator('.close-icon').click();
+
+      // Click on the request to make it active again
+      await page.locator('.collection-item-name').filter({ hasText: 'Test Request' }).click();
     });
 
     await test.step('Make changes and verify autosave', async () => {
@@ -82,23 +89,29 @@ test.describe('Autosave', () => {
     });
 
     await test.step('Disable autosave in preferences', async () => {
-      // Open preferences from status bar
+      // Open preferences tab
       await page.locator('.status-bar button[data-trigger="preferences"]').click();
 
-      // Wait for preferences modal
-      const preferencesModal = page.locator('.bruno-modal-card').filter({ hasText: 'Preferences' });
-      await expect(preferencesModal).toBeVisible();
+      // Wait for preferences tab to be visible
+      await page.waitForTimeout(500);
+
+      // Navigate to General tab
+      await page.getByRole('tab', { name: 'General' }).click();
 
       // Disable autosave checkbox
-      const autoSaveCheckbox = preferencesModal.locator('#autoSaveEnabled');
+      const autoSaveCheckbox = page.locator('#autoSaveEnabled');
       await autoSaveCheckbox.uncheck();
 
       // Wait for auto-save to complete (debounce is 500ms)
       await page.waitForTimeout(1000);
 
-      // Close preferences modal
-      await preferencesModal.locator('[data-testid="modal-close-button"]').click();
-      await expect(preferencesModal).not.toBeVisible();
+      // Close preferences tab using the close icon
+      const preferencesTab = page.locator('.request-tab').filter({ hasText: 'Preferences' });
+      await preferencesTab.hover();
+      await preferencesTab.locator('.close-icon').click();
+
+      // Click on the request to make it active again
+      await page.locator('.collection-item-name').filter({ hasText: 'Test Request' }).click();
     });
 
     await test.step('Make changes and verify no autosave when disabled', async () => {
@@ -160,22 +173,29 @@ test.describe('Autosave', () => {
     });
 
     await test.step('Enable autosave and verify existing draft is saved', async () => {
-      // Open preferences
+      // Open preferences tab
       await page.locator('.status-bar button[data-trigger="preferences"]').click();
 
-      const preferencesModal = page.locator('.bruno-modal-card').filter({ hasText: 'Preferences' });
-      await expect(preferencesModal).toBeVisible();
+      // Wait for preferences tab to be visible
+      await page.waitForTimeout(500);
+
+      // Navigate to General tab
+      await page.getByRole('tab', { name: 'General' }).click();
 
       // Enable autosave checkbox
-      const autoSaveCheckbox = preferencesModal.locator('#autoSaveEnabled');
+      const autoSaveCheckbox = page.locator('#autoSaveEnabled');
       await autoSaveCheckbox.check();
 
       // Wait for auto-save to complete (debounce is 500ms)
       await page.waitForTimeout(1000);
 
-      // Close preferences modal
-      await preferencesModal.locator('[data-testid="modal-close-button"]').click();
-      await expect(preferencesModal).not.toBeVisible();
+      // Close preferences tab using the close icon
+      const preferencesTab = page.locator('.request-tab').filter({ hasText: 'Preferences' });
+      await preferencesTab.hover();
+      await preferencesTab.locator('.close-icon').click();
+
+      // Click on the request to make it active again
+      await page.locator('.collection-item-name').filter({ hasText: 'Draft Request' }).click();
 
       await page.waitForTimeout(1000);
 

tests/preferences/default-collection-location/default-collection-location.spec.js

@@ -2,47 +2,30 @@ import { test, expect } from '../../../playwright';
 
 test.describe('Default Collection Location Feature', () => {
   test('Should hydrate the default location from preferences', async ({ pageWithUserData: page }) => {
-    // open preferences
+    // open preferences tab
     await page.locator('.preferences-button').click();
 
+    // wait for preferences tab to be visible
+    await page.waitForTimeout(500);
+
+    // navigate to General tab
+    await page.getByRole('tab', { name: 'General' }).click();
+
     // verify the default location is pre-filled
     const defaultLocationInput = page.locator('.default-collection-location-input');
     await expect(defaultLocationInput).toHaveValue('/tmp/bruno-collections');
-
-    // close the preferences
-    await page.getByTestId('modal-close-button').click();
-
-    // wait for 2 seconds
-    await page.waitForTimeout(2000);
-  });
-
-  test('Should save empty default location', async ({ pageWithUserData: page }) => {
-    // open preferences
-    await page.locator('.preferences-button').click();
-
-    // clear the default location field (readonly input, remove readonly then clear)
-    const defaultLocationInput = page.locator('.default-collection-location-input');
-    await defaultLocationInput.evaluate((el) => {
-      const input = el;
-      input.removeAttribute('readonly');
-      input.readOnly = false;
-    });
-    await defaultLocationInput.clear();
-
-    // wait for auto-save to complete (debounce is 500ms)
-    await page.waitForTimeout(1000);
-
-    // close the preferences
-    await page.getByTestId('modal-close-button').click();
-
-    // wait for modal to close
-    await page.waitForTimeout(500);
   });
 
   test('Should save a valid default location', async ({ pageWithUserData: page }) => {
-    // open preferences
+    // open preferences tab
     await page.locator('.preferences-button').click();
 
+    // wait for preferences tab to be visible
+    await page.waitForTimeout(500);
+
+    // navigate to General tab
+    await page.getByRole('tab', { name: 'General' }).click();
+
     // set a default location (readonly input, remove readonly then fill)
     const defaultLocationInput = page.locator('.default-collection-location-input');
     await defaultLocationInput.evaluate((el) => {
@@ -54,12 +37,6 @@ test.describe('Default Collection Location Feature', () => {
 
     // wait for auto-save to complete (debounce is 500ms)
     await page.waitForTimeout(1000);
-
-    // close the preferences
-    await page.getByTestId('modal-close-button').click();
-
-    // wait for modal to close
-    await page.waitForTimeout(500);
   });
 
   test('Should use default location in Create Collection modal', async ({ pageWithUserData: page }) => {
@@ -67,17 +44,20 @@ test.describe('Default Collection Location Feature', () => {
     await page.getByTestId('collections-header-add-menu').click();
     await page.locator('.tippy-box .dropdown-item').filter({ hasText: 'Create collection' }).click();
 
-    // verify the default location is pre-filled (if location input is visible)
-    const collectionLocationInput = page.getByLabel('Location');
-    if (await collectionLocationInput.isVisible()) {
-      await expect(collectionLocationInput).toHaveValue('/tmp/bruno-collections');
-    }
+    // Wait for modal to be visible
+    await page.locator('.bruno-modal').waitFor({ state: 'visible' });
+
+    // verify the default location is pre-filled
+    // Scope to the modal to avoid conflict with preferences tab
+    const collectionLocationInput = page.locator('.bruno-modal').getByLabel('Location', { exact: true });
+    await expect(collectionLocationInput).toBeVisible();
+
+    const inputValue = await collectionLocationInput.inputValue();
+
+    await expect(collectionLocationInput).toHaveValue('/tmp/bruno-collections', { timeout: 5000 });
 
     // cancel the collection creation
     await page.locator('.bruno-modal').getByRole('button', { name: 'Cancel' }).click();
-
-    // wait for 2 seconds
-    await page.waitForTimeout(2000);
   });
 
   test('Should use default location in Clone Collection modal', async ({ pageWithUserData: page }) => {
@@ -87,16 +67,39 @@ test.describe('Default Collection Location Feature', () => {
     await collection.locator('.collection-actions .icon').click();
     await page.locator('.dropdown-item').filter({ hasText: 'Clone' }).click();
 
+    // Wait for modal to be visible
+    await page.locator('.bruno-modal').waitFor({ state: 'visible' });
+
     // verify the default location is pre-filled
-    const cloneLocationInput = page.getByLabel('Location');
-    if (await cloneLocationInput.isVisible()) {
-      await expect(cloneLocationInput).toHaveValue('/tmp/bruno-collections');
-    }
+    // Scope to the modal to avoid conflict with preferences tab
+    const cloneLocationInput = page.locator('.bruno-modal').getByLabel('Location', { exact: true });
+    await expect(cloneLocationInput).toBeVisible();
+    await expect(cloneLocationInput).toHaveValue('/tmp/bruno-collections', { timeout: 5000 });
 
     // cancel the clone operation
     await page.locator('.bruno-modal').getByRole('button', { name: 'Cancel' }).click();
+  });
 
-    // wait for 2 seconds
-    await page.waitForTimeout(2000);
+  test('Should save empty default location', async ({ pageWithUserData: page }) => {
+    // open preferences tab
+    await page.locator('.preferences-button').click();
+
+    // wait for preferences tab to be visible
+    await page.waitForTimeout(500);
+
+    // navigate to General tab
+    await page.getByRole('tab', { name: 'General' }).click();
+
+    // clear the default location field (readonly input, remove readonly then clear)
+    const defaultLocationInput = page.locator('.default-collection-location-input');
+    await defaultLocationInput.evaluate((el) => {
+      const input = el;
+      input.removeAttribute('readonly');
+      input.readOnly = false;
+    });
+    await defaultLocationInput.clear();
+
+    // wait for auto-save to complete (debounce is 500ms)
+    await page.waitForTimeout(1000);
   });
 });

tests/preferences/support-links.spec.js

@@ -22,6 +22,4 @@ test('Should verify all support links with correct URL in preference > Support t
 
   const locator_documentation = page.getByRole('link', { name: 'Documentation', exact: true });
   expect(await locator_documentation.getAttribute('href')).toEqual('https://docs.usebruno.com');
-
-  await page.getByTestId('modal-close-button').click();
 });