From 2eb8e4227ab1e508943ec954f9b166fbc55ab942 Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Mon, 25 Nov 2024 21:29:25 +0700
Subject: [PATCH] [docs-infra] Improve locator finding using visible option
 (#44541)

---
 .../templates/dashboard/components/AppNavbar.js  |  2 +-
 .../templates/dashboard/components/AppNavbar.tsx |  2 +-
 docs/scripts/generateTemplateScreenshots.ts      | 16 ++++++++++------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
index d21c86dab33bda..99f12b420f6092 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
@@ -68,7 +68,7 @@ export default function AppNavbar() {
               Dashboard
             </Typography>
           </Stack>
-          <ColorModeIconDropdown data-screenshot="" />
+          <ColorModeIconDropdown />
           <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
             <MenuRoundedIcon />
           </MenuButton>
diff --git a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
index bbf2f446d0c4c3..739273583c2ce0 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
@@ -68,7 +68,7 @@ export default function AppNavbar() {
               Dashboard
             </Typography>
           </Stack>
-          <ColorModeIconDropdown data-screenshot="" />
+          <ColorModeIconDropdown />
           <MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
             <MenuRoundedIcon />
           </MenuButton>
diff --git a/docs/scripts/generateTemplateScreenshots.ts b/docs/scripts/generateTemplateScreenshots.ts
index bddd5c66394d81..fa93891715874a 100644
--- a/docs/scripts/generateTemplateScreenshots.ts
+++ b/docs/scripts/generateTemplateScreenshots.ts
@@ -79,43 +79,47 @@ const names = new Set(process.argv.slice(2));
             (file) => `/${project}/getting-started/templates/${file.replace(/\.(js|tsx)$/, '/')}`,
           );
 
+        async function toggleMode() {
+          await page.locator('css=[data-screenshot="toggle-mode"]').locator('visible=true').click();
+        }
+
         async function captureDarkMode(outputPath: string) {
           const btn = await page.$('[data-screenshot="toggle-mode"]');
           if (btn) {
             if ((await btn.getAttribute('aria-haspopup')) === 'true') {
-              await page.click('[data-screenshot="toggle-mode"]');
+              await toggleMode();
               await page.getByRole('menuitem').filter({ hasText: /dark/i }).click();
               await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
               await sleep(100); // give time for image decoding, resizing, rendering
 
               await page.screenshot({ path: outputPath, animations: 'disabled' });
 
-              await page.click('[data-screenshot="toggle-mode"]');
+              await toggleMode();
               await page
                 .getByRole('menuitem')
                 .filter({ hasText: /system/i })
                 .click(); // switch back to light
             } else if ((await btn.getAttribute('aria-haspopup')) === 'listbox') {
-              await page.click('[data-screenshot="toggle-mode"]');
+              await toggleMode();
               await page.getByRole('option').filter({ hasText: /dark/i }).click();
               await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
               await sleep(100); // give time for image decoding, resizing, rendering
 
               await page.screenshot({ path: outputPath, animations: 'disabled' });
 
-              await page.click('[data-screenshot="toggle-mode"]');
+              await toggleMode();
               await page
                 .getByRole('option')
                 .filter({ hasText: /system/i })
                 .click(); // switch back to light
             } else {
-              await page.click('[data-screenshot="toggle-mode"]');
+              await toggleMode();
               await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
               await sleep(100); // give time for image decoding, resizing, rendering
 
               await page.screenshot({ path: outputPath, animations: 'disabled' });
 
-              await page.click('[data-screenshot="toggle-mode"]'); // switch back to light
+              await toggleMode(); // switch back to light
             }
           }
         }