Playwright: Verifying theme configuration workflows through automation under Preferences.

[ved-bruno]

Description

This PR adds automated tests using Playwright to verify the correct functionality of application theme selection workflows under the Preferences section.

Jira link to track this task: https://usebruno.atlassian.net/browse/BRU-1028

Contribution Checklist:

• The pull request only addresses one issue or adds one feature.
• The pull request does not introduce any breaking changes
• I have added screenshots or gifs to help explain the change if applicable.
• I have read the contribution guidelines.
• Create an issue and link to the pull request.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

Publishing to New Package Managers

Please see here for more information.

[helloanoop]

Instead of just checking the color of a text, I believe a better check would be to ensure that the background and the color of the body tag is changed as expected.

[helloanoop]

A better title could be should be able to switch between light and dark theme

Also @ved-bruno I believe there should be two tests here

1. Clocking on radio buttons and expecting the theme to change
2. Ensuring that the system theme config is respected page.emulateMedia({ colorScheme: systemTheme }); which is the current test you have.

[ved-bruno]

Hey @helloanoop, have made the suggested updates in this PR.

[helloanoop]

@ved-bruno Please improve the formatting as well as have the checks performed at the app level.
Sample pseudo code

import { test, expect } from '../playwright';

test('should be able to switch between light and dark theme', async ({ page }) => {
  await page.getByLabel('Open Preferences').click();
  await page.getByRole('tab', { name: 'Display' }).click();

  // Light mode
  await page.getByLabel('Light').check();
  const bgColorLightMode = page
    .locator('.bruno-modal-header')
    .evaluate((el) => window.getComputedStyle(el).backgroundColor);
  expect(bgColorLightMode).toBe('rgb(241, 241, 241)');

  // Dark mode
  await page.getByLabel('Dark').check();
  const bgColorDarkMode = page
    .locator('.bruno-modal-header')
    .evaluate((el) => window.getComputedStyle(el).backgroundColor);
  expect(bgColorDarkMode).toBe('rgb(38, 38, 39)');
});

test('should use system theme', async ({ page }) => {
  await page.getByLabel('Open Preferences').click();
  await page.getByRole('tab', { name: 'Display' }).click();
  await page.getByLabel('System').check();

  // Emulate light mode
  await page.emulateMedia({ colorScheme: 'light' });
  const bgColorLightMode = page
    .locator('.bruno-modal-header')
    .evaluate((el) => window.getComputedStyle(el).backgroundColor);
  expect(bgColorLightMode).toBe('rgb(241, 241, 241)');

  // Emulate dark mode
  await page.emulateMedia({ colorScheme: 'dark' });
  const bgColorDarkMode = page
    .locator('.bruno-modal-header')
    .evaluate((el) => window.getComputedStyle(el).backgroundColor);
  expect(bgColorDarkMode).toBe('rgb(38, 38, 39)');
});