test(many): replace ionic buttons in e2e tests with native html buttons (#29422)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
The `ion-button` component is used in several tests to navigate or show
overlays. This causes screenshot diffs in unrelated tests any time the
UI of the `ion-button` is updated.

## What is the new behavior?
Removes the `ion-button` elements from unrelated tests. 

Did not remove the `ion-button`s from the following tests:
- All `ion-button`s in an `ion-buttons` component
- An `ion-button` inside of a menu
- breadcrumbs/test/basic (uses a clear button in a list header, needs to
be moved)
- input/test/slot
- item/test/buttons
- item/test/colors
- item/test/dividers
- item/test/inputs
- item/test/media
- list-header/test/basic
- ripple-effect/test/basic
- router/test/basic
- router/test/guards
- router-outlet/test/basic
- select/test/slot
- textarea/test/slot

Updates the icon/basic test to use the right icon names by comparing
against the v3 names: https://ionicframework.com/docs/v3/ionicons/

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/scripts/testing/styles.css

@@ -48,3 +48,23 @@ html.ios.ios {
   --ion-font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
   font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
 }
+
+ion-content button,
+main button {
+  display: inline-block;
+  width: auto;
+  clear: both;
+  padding: 12px 8px;
+  font-size: 1em;
+  background: #008080;
+  border: 1px solid #005555;
+  color: #fff;
+  border-radius: 4px;
+  margin: 8px 0;
+}
+
+ion-content button.expand,
+main button.expand {
+  display: block;
+  width: 100%;
+}

core/src/components/action-sheet/test/a11y/index.html

@@ -19,14 +19,14 @@
     <main class="ion-padding">
       <h1>Action Sheet - A11y</h1>
 
-      <ion-button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</ion-button>
-      <ion-button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
-      <ion-button id="noHeaders" onclick="presentNoHeaders()">No Headers</ion-button>
-      <ion-button id="customAria" onclick="presentCustomAria()">Custom Aria</ion-button>
-      <ion-button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
-      <ion-button id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()"
-        >Aria Label Cancel Button</ion-button
-      >
+      <button class="expand" id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
+      <button class="expand" id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
+      <button class="expand" id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
+      <button class="expand" id="customAria" onclick="presentCustomAria()">Custom Aria</button>
+      <button class="expand" id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
+      <button class="expand" id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()">
+        Aria Label Cancel Button
+      </button>
     </main>
 
     <script>

core/src/components/action-sheet/test/basic/index.html

@@ -27,24 +27,18 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
-        <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()"
-          >Alert from Action Sheet</ion-button
-        >
-        <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
-        <ion-button expand="block" id="custom" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
-        <ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
-        <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()"
-          >No Backdrop Dismiss</ion-button
-        >
-        <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
-        <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()"
-          >Scroll Without Cancel</ion-button
-        >
-        <ion-button expand="block" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')"
-          >Custom Backdrop Opacity</ion-button
-        >
-        <ion-button expand="block" id="buttonData" onclick="presentWithButtonData()">Button data</ion-button>
+        <button class="expand" id="basic" onclick="presentBasic()">Basic</button>
+        <button class="expand" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+        <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
+        <button class="expand" id="custom" onclick="presentWithCssClass()">Custom CSS Class</button>
+        <button class="expand" id="icons" onclick="presentIcons()">Icons</button>
+        <button class="expand" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+        <button class="expand" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+        <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+        <button class="expand" id="customBackdrop" onclick="presentWithCssClass('custom-backdrop')">
+          Custom Backdrop Opacity
+        </button>
+        <button class="expand" id="buttonData" onclick="presentWithButtonData()">Button data</button>
       </ion-content>
     </ion-app>
 

core/src/components/action-sheet/test/is-open/index.html

@@ -47,11 +47,11 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default</h2>
-            <ion-button id="default" onclick="openActionSheet()">Open ActionSheet</ion-button>
+            <button id="default" onclick="openActionSheet()">Open ActionSheet</button>
           </div>
           <div class="grid-item">
             <h2>Open, then close after 500ms</h2>
-            <ion-button id="timeout" onclick="openActionSheet(500)">Open ActionSheet</ion-button>
+            <button id="timeout" onclick="openActionSheet(500)">Open ActionSheet</button>
           </div>
         </div>
 

core/src/components/action-sheet/test/standalone/index.html

@@ -18,28 +18,16 @@
     window.actionSheetController = actionSheetController;
   </script>
   <body>
-    <button id="basic" onclick="presentBasic()">Basic</button>
-    <button id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
-    <button id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
-    <button id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
-    <button id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
-    <button id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
-    <button id="icons" onclick="presentIcons()">Icons</button>
-    <button id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
-
-    <style>
-      body > button {
-        display: block;
-        clear: both;
-        width: 100%;
-        padding: 12px 8px;
-        font-size: 1em;
-        background: #f8f8f8;
-        border: 1px solid #eee;
-        border-radius: 4px;
-        margin-bottom: 8px;
-      }
-    </style>
+    <main>
+      <button class="expand" id="basic" onclick="presentBasic()">Basic</button>
+      <button class="expand" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+      <button class="expand" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+      <button class="expand" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+      <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+      <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
+      <button class="expand" id="icons" onclick="presentIcons()">Icons</button>
+      <button class="expand" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
+    </main>
 
     <script>
       window.addEventListener('ionActionSheetDidDismiss', function (e) {

core/src/components/action-sheet/test/translucent/index.html

@@ -12,6 +12,50 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      f {
+        display: block;
+        width: 100%;
+        height: 150px;
+      }
+
+      .red {
+        background-color: #ea445a;
+      }
+
+      .green {
+        background-color: #76d672;
+      }
+
+      .blue {
+        background-color: #3478f6;
+      }
+
+      .yellow {
+        background-color: #ffff80;
+      }
+
+      .pink {
+        background-color: #ff6b86;
+      }
+
+      .purple {
+        background-color: #7e34f6;
+      }
+
+      .black {
+        background-color: #000;
+      }
+
+      .fuchsia {
+        background-color: #cc00ff;
+      }
+
+      .orange {
+        background-color: #f69234;
+      }
+    </style>
   </head>
   <script type="module">
     import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
@@ -26,18 +70,12 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
-        <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()"
-          >No Backdrop Dismiss</ion-button
-        >
-        <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()"
-          >Alert from Action Sheet</ion-button
-        >
-        <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
-        <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()"
-          >Scroll Without Cancel</ion-button
-        >
-        <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
+        <button class="expand" id="basic" onclick="presentBasic()">Basic</button>
+        <button class="expand" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+        <button class="expand" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+        <button class="expand" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+        <button class="expand" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+        <button class="expand" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
 
         <ion-grid>
           <ion-row>
@@ -345,49 +383,5 @@
         });
       }
     </script>
-
-    <style>
-      f {
-        display: block;
-        width: 100%;
-        height: 150px;
-      }
-
-      .red {
-        background-color: #ea445a;
-      }
-
-      .green {
-        background-color: #76d672;
-      }
-
-      .blue {
-        background-color: #3478f6;
-      }
-
-      .yellow {
-        background-color: #ffff80;
-      }
-
-      .pink {
-        background-color: #ff6b86;
-      }
-
-      .purple {
-        background-color: #7e34f6;
-      }
-
-      .black {
-        background-color: #000;
-      }
-
-      .fuchsia {
-        background-color: #cc00ff;
-      }
-
-      .orange {
-        background-color: #f69234;
-      }
-    </style>
   </body>
 </html>

core/src/components/action-sheet/test/trigger/index.html

@@ -47,11 +47,11 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default</h2>
-            <ion-button id="default">Open ActionSheet</ion-button>
+            <button id="default">Open ActionSheet</button>
           </div>
           <div class="grid-item">
             <h2>Open, then close after 500ms</h2>
-            <ion-button id="timeout">Open ActionSheet</ion-button>
+            <button id="timeout">Open ActionSheet</button>
           </div>
         </div>
 

core/src/components/alert/test/a11y/index.html

@@ -9,19 +9,6 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      main > button {
-        display: block;
-        clear: both;
-        width: 100%;
-        padding: 12px 8px;
-        font-size: 1em;
-        background: #f8f8f8;
-        border: 1px solid #eee;
-        border-radius: 4px;
-        margin-bottom: 8px;
-      }
-    </style>
   </head>
   <script type="module">
     import { alertController } from '../../../../dist/ionic/index.esm.js';
@@ -32,13 +19,13 @@
     <main class="ion-padding">
       <h1>Alert - A11y</h1>
 
-      <button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
-      <button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
-      <button id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
-      <button id="noMessage" onclick="presentNoMessage()">No Message</button>
-      <button id="customAria" onclick="presentCustomAria()">Custom Aria</button>
-      <button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
-      <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
+      <button class="expand" id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
+      <button class="expand" id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
+      <button class="expand" id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
+      <button class="expand" id="noMessage" onclick="presentNoMessage()">No Message</button>
+      <button class="expand" id="customAria" onclick="presentCustomAria()">Custom Aria</button>
+      <button class="expand" id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
+      <button class="expand" id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
     </main>
 
     <script>