-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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
base: main
Are you sure you want to change the base?
Conversation
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)"); |
There was a problem hiding this comment.
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 }) => { |
There was a problem hiding this comment.
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
- Clocking on radio buttons and expecting the theme to change
- Ensuring that the system theme config is respected
page.emulateMedia({ colorScheme: systemTheme });
which is the current test you have.
There was a problem hiding this comment.
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.
…nts' into e2edisplay_theme
@ved-bruno Please improve the formatting as well as have the checks performed at the app level. 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)');
}); |
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:
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.