[docs-infra] Improve locator finding using visible option (#44541)

mui · Nov 25, 2024 · 2eb8e42 · 2eb8e42
1 parent ef68514
commit 2eb8e42
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 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
@@ -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
@@ -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
@@ -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
             }
           }
         }