From 01b87ee71c81dc5a5b090acb4207e0fa4fb4094c Mon Sep 17 00:00:00 2001 From: Pragadesh-45 <54320162+Pragadesh-45@users.noreply.github.com> Date: Thu, 22 Jan 2026 20:16:33 +0530 Subject: [PATCH] refactor: improve element interactions in preferences and fix playwright tests (#6894) --- tests/preferences/autosave/autosave.spec.ts | 64 +++++++---- .../default-collection-location.spec.js | 105 +++++++++--------- tests/preferences/support-links.spec.js | 2 - 3 files changed, 96 insertions(+), 75 deletions(-) diff --git a/tests/preferences/autosave/autosave.spec.ts b/tests/preferences/autosave/autosave.spec.ts index dd70dce6f..0d8d5f425 100644 --- a/tests/preferences/autosave/autosave.spec.ts +++ b/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); diff --git a/tests/preferences/default-collection-location/default-collection-location.spec.js b/tests/preferences/default-collection-location/default-collection-location.spec.js index 9d15091e3..40b49a6f0 100644 --- a/tests/preferences/default-collection-location/default-collection-location.spec.js +++ b/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); }); }); diff --git a/tests/preferences/support-links.spec.js b/tests/preferences/support-links.spec.js index 4d9444572..3ea7ed401 100644 --- a/tests/preferences/support-links.spec.js +++ b/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(); });