[e2e stability] Check for data-theme before taking a screenshot (#3523)

* Check for data-theme before taking a screenshot

* Release notes

* Update playwright.config.js

* Fix error

* Updates VRT

* VRT

* Revert VRT

---------

Co-authored-by: youngcw <calebyoung94@gmail.com>

packages/desktop-client/playwright.config.js

@@ -17,8 +17,17 @@ expect.extend({
       maxDiffPixels: 5,
     };
 
+    // Get the data-theme attribute from page.
+    // If there is a page() function, it means that the locator
+    // is not a page object but a locator object.
+    const dataThemeLocator =
+      typeof locator.page === 'function'
+        ? locator.page().locator('[data-theme]')
+        : locator.locator('[data-theme]');
+
     // Check lightmode
     await locator.evaluate(() => window.Actual.setTheme('auto'));
+    await expect(dataThemeLocator).toHaveAttribute('data-theme', 'auto');
     const lightmode = await expect(locator).toHaveScreenshot(config);
 
     if (lightmode && !lightmode.pass) {
@@ -27,6 +36,7 @@ expect.extend({
 
     // Switch to darkmode and check
     await locator.evaluate(() => window.Actual.setTheme('dark'));
+    await expect(dataThemeLocator).toHaveAttribute('data-theme', 'dark');
     const darkmode = await expect(locator).toHaveScreenshot(config);
 
     // Assert on
@@ -36,6 +46,7 @@ expect.extend({
 
     // Switch to midnight theme and check
     await locator.evaluate(() => window.Actual.setTheme('midnight'));
+    await expect(dataThemeLocator).toHaveAttribute('data-theme', 'midnight');
     const midnightMode = await expect(locator).toHaveScreenshot(config);
 
     // Assert on

packages/desktop-client/src/components/App.tsx

@@ -29,7 +29,7 @@ import {
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { installPolyfills } from '../polyfills';
 import { ResponsiveProvider } from '../ResponsiveProvider';
-import { styles, hasHiddenScrollbars, ThemeStyle } from '../style';
+import { styles, hasHiddenScrollbars, ThemeStyle, useTheme } from '../style';
 import { ExposeNavigate } from '../util/router-tools';
 
 import { AppBackground } from './AppBackground';
@@ -155,6 +155,8 @@ export function App() {
     };
   }, [dispatch]);
 
+  const [theme] = useTheme();
+
   return (
     <BrowserRouter>
       <ExposeNavigate />
@@ -166,6 +168,7 @@ export function App() {
                 <DndProvider backend={HTML5Backend}>
                   <ScrollProvider>
                     <View
+                      data-theme={theme}
                       style={{
                         height: '100%',
                         display: 'flex',

upcoming-release-notes/3523.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+e2e stability: wait for data-theme to switch before taking a screenshot