test(button): ripple effect screenshot tests (#25295)

core/src/components/button/test/basic/button.e2e.ts

@@ -10,3 +10,28 @@ test.describe('button: basic', () => {
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
   });
 });
+
+test.describe('button: ripple effect', () => {
+  test('should not have visual regressions', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.mode !== 'md', 'Ripple effect is only available in MD mode.');
+
+    await page.goto(`/src/components/button/test/basic?ionic:_testing=false`);
+
+    const button = page.locator('#default');
+
+    await button.scrollIntoViewIfNeeded();
+
+    const boundingBox = await button.boundingBox();
+
+    if (boundingBox) {
+      await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
+      await page.mouse.down();
+    }
+
+    await page.waitForSelector('#default.ion-activated');
+
+    expect(await button.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `button-ripple-effect-${page.getSnapshotSettings()}.png`
+    );
+  });
+});

core/src/components/button/test/basic/index.html

@@ -24,7 +24,7 @@
 
       <ion-content class="ion-padding ion-text-center" id="content" no-bounce>
         <p>
-          <ion-button>Default</ion-button>
+          <ion-button id="default">Default</ion-button>
           <ion-button class="ion-focused">Default.focused</ion-button>
           <ion-button class="ion-activated">Default.activated</ion-button>
         </p>