Skip to content

Playwright: Verifying theme configuration workflows through automation under Preferences. #4739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

ved-bruno
Copy link
Collaborator

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.

ramki-bruno and others added 4 commits April 17, 2025 19:52
Allow editing the input path where previous the `<input>` is marked
`readonly`.
Also this will allow automating test using Playwright.
for (const systemTheme of ['light', 'dark']) {
await page.emulateMedia({ colorScheme: systemTheme });
if (systemTheme === 'light') {
await expect(page.getByText("Light")).toHaveCSS("color", "rgb(52, 52, 52)");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@@ -0,0 +1,19 @@
import { test, expect } from '../playwright';
test('Verify Display Themes', async ({ page }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@helloanoop
Copy link
Contributor

@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)');
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants