test(toolbar): fix flaky tests for toolbar

brandyscarney · brandyscarney · commit d9eb400a005e · 2025-08-05T17:37:46.000-04:00
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts b/core/src/components/toolbar/test/basic/toolbar.e2e.ts
@@ -86,7 +86,9 @@ configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'] }).forEa
       await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-icon-buttons`));
     });
 
-    test('should not have visual regressions with buttons with icons and text', async ({ page }) => {
+    test('should not have visual regressions with buttons with icons and text', async ({ page, skip }) => {
+      skip.browser('webkit', 'Safari does not consistently render overflowing text in a toolbar with icons and text.');
+
       await page.setContent(
         `
           <ion-header>
@@ -216,6 +218,10 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
           config
         );
 
+        // Wait for images to be visible
+        await page.locator('img').first().waitFor({ state: 'visible' });
+        await page.locator('ion-img').first().waitFor({ state: 'visible' });
+
         const header = page.locator('ion-header');
         await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-slotted-images`));
       });
@@ -238,6 +244,10 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
           config
         );
 
+        // Wait for images to be visible
+        await page.locator('img').first().waitFor({ state: 'visible' });
+        await page.locator('ion-img').first().waitFor({ state: 'visible' });
+
         const header = page.locator('ion-header');
         await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-nested-slotted-images`));
       });
