test(e2e): add infrastructure for migration to playwright (#25033)

.github/workflows/actions/build-core/action.yml

@@ -28,3 +28,8 @@ runs:
         name: ionic-core
         output: core/CoreBuild.zip
         paths: core/dist core/components core/css core/hydrate core/loader
+    - uses: ./.github/workflows/actions/upload-archive
+      with:
+        name: ionic-core-src
+        output: core/CoreSrc.zip
+        paths: core/src

.github/workflows/actions/test-core-screenshot-main/action.yml

@@ -1,33 +0,0 @@
-name: 'Test Core Screenshot Main'
-description: 'Test Core Screenshot Main'
-inputs:
-  access-key-id:
-    description: 'AWS_ACCESS_KEY_ID'
-  secret-access-key:
-    description: 'AWS_SECRET_ACCESS_KEY'
-runs:
-  using: 'composite'
-  steps:
-    - uses: actions/setup-node@v1
-      with:
-        node-version: 15.x
-
-    - name: Cache Core Node Modules
-      uses: actions/cache@v2
-      env:
-        cache-name: core-node-modules
-      with:
-        path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
-    - uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-core
-        path: ./core
-        filename: CoreBuild.zip
-    - name: Test
-      run: npx stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci --update-screenshot --no-build || true
-      shell: bash
-      env:
-        AWS_ACCESS_KEY_ID: ${{ inputs.access-key-id }}
-        AWS_SECRET_ACCESS_KEY: ${{ inputs.secret-access-key }}
-      working-directory: ./core

.github/workflows/actions/test-core-screenshot/action.yml

@@ -1,10 +1,12 @@
 name: 'Test Core Screenshot'
 description: 'Test Core Screenshot'
 inputs:
-  access-key-id:
-    description: 'AWS_ACCESS_KEY_ID'
-  secret-access-key:
-    description: 'AWS_SECRET_ACCESS_KEY'
+  shard:
+    description: 'Playwright Test Shard (ex: 2)'
+  totalShards:
+    description: 'Playwright total number of test shards (ex: 4)'
+  update:
+    description: 'Whether or not to update the reference snapshots'
 runs:
   using: 'composite'
   steps:
@@ -24,10 +26,35 @@ runs:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
-    - name: Test
-      run: npx stencil test --e2e --screenshot --screenshot-connector=scripts/screenshot/ci.js --ci --no-build || true
+    - uses: ./.github/workflows/actions/download-archive
+      with:
+        name: ionic-core-src
+        path: ./core
+        filename: CoreSrc.zip
+    - name: Install Playwright Dependencies
+      run: npx playwright install && npx playwright install-deps
       shell: bash
-      env:
-        AWS_ACCESS_KEY_ID: ${{ inputs.access-key-id }}
-        AWS_SECRET_ACCESS_KEY: ${{ inputs.secret-access-key }}
       working-directory: ./core
+    - name: Test
+      if: inputs.update != 'true'
+      run: npx playwright test --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
+      shell: bash
+      working-directory: ./core
+    - name: Test and Update
+      if: inputs.update == 'true'
+      run: npx playwright test --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
+      shell: bash
+      working-directory: ./core
+    - name: Archive Test Results
+      # The always() ensures that this step
+      # runs even if the previous step fails.
+      # We want the test results to be archived
+      # even if the test fails in the previous
+      # step, otherwise there would be no way
+      # to debug these tests.
+      if: always()
+      uses: ./.github/workflows/actions/upload-archive
+      with:
+        name: test-results-${{ inputs.shard }}-${{ inputs.totalShards }}
+        output: core/TestResults-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
+        paths: core/playwright-report core/src

.github/workflows/actions/update-reference-screenshots/action.yml

@@ -0,0 +1,35 @@
+name: 'Update Reference Screenshots'
+description: 'Update Reference Screenshots'
+
+on:
+  workflow_dispatch:
+
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: 15.x
+    - uses: actions/download-artifact@v2
+      with:
+        path: ./artifacts
+    - name: Extract Archives
+      # This finds all .zip files in the ./artifacts
+      # directory, including nested directories.
+      # It then unzips every .zip to the root directory
+      run: |
+        find . -type f -name '*.zip' -exec unzip -q -o -d ../ -- '{}'  -x '*.zip' \;
+      shell: bash
+      working-directory: ./artifacts
+    - name: Push Screenshots
+      # Configure user as Ionitron
+      # and push only the changed .png snapshots
+      # to the remote branch.
+      run: |
+        git config user.name ionitron
+        git config user.email hi@ionicframework.com
+        git add src/\*.png
+        git commit -m "chore(): add updated snapshots"
+        git push
+      shell: bash
+      working-directory: ./core

.github/workflows/build.yml

@@ -40,26 +40,28 @@ jobs:
       - uses: ./.github/workflows/actions/test-core-e2e
 
   test-core-screenshot:
+    strategy:
+      # This ensures that all screenshot shard
+      # failures are reported so the dev can
+      # review everything at once.
+      fail-fast: false
+      matrix:
+        # Divide the tests into n buckets
+        # and run those buckets in parallel.
+        # To increase the number of shards,
+        # add new items to the shard array
+        # and change the value of totalShards
+        # to be the length of the shard array.
+        shard: [1, 2, 3, 4, 5]
+        totalShards: [5]
     needs: [build-core]
     runs-on: ubuntu-latest
-    if: github.ref != 'refs/heads/main' && !github.event.pull_request.head.repo.fork
     steps:
       - uses: actions/checkout@v2
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
-          access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-
-  test-core-screenshot-main:
-    needs: [build-core]
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/main'
-    steps:
-      - uses: actions/checkout@v2
-      - uses: ./.github/workflows/actions/test-core-screenshot-main
-        with:
-          access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          shard: ${{ matrix.shard }}
+          totalShards: ${{ matrix.totalShards }}
 
   build-vue:
     needs: [build-core]

.github/workflows/update-screenshots.yml

@@ -1,11 +1,52 @@
-name: 'Update Screenshot References'
+name: 'Update Reference Screenshots'
 
 on:
   workflow_dispatch:
 
 jobs:
-  stub:
+  build-core:
+    runs-on: ubuntu-latest
     steps:
-      - name: Stub
-        run: echo 'This is a stub'
-        shell: bash
+      - uses: actions/checkout@v2
+      - uses: ./.github/workflows/actions/build-core
+
+  test-core-screenshot:
+    strategy:
+      # This ensures that all screenshot shard
+      # failures are reported so the dev can
+      # review everything at once.
+      fail-fast: false
+      matrix:
+        # Divide the tests into n buckets
+        # and run those buckets in parallel.
+        # To increase the number of shards,
+        # add new items to the shard array
+        # and change the value of totalShards
+        # to be the length of the shard array.
+        shard: [1, 2, 3, 4, 5]
+        totalShards: [5]
+    needs: [build-core]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: ./.github/workflows/actions/test-core-screenshot
+        with:
+          shard: ${{ matrix.shard }}
+          totalShards: ${{ matrix.totalShards }}
+          update: true
+
+  update-reference-screenshots:
+    runs-on: ubuntu-latest
+    needs: [test-core-screenshot]
+    steps:
+      - uses: actions/checkout@v2
+        # Normally, we could just push with the
+        # default GITHUB_TOKEN, but that will
+        # not cause the build workflow
+        # to re-run. We use Ionitron's
+        # Personal Access Token instead
+        # to allow for this build workflow
+        # to run when the screenshots are pushed.
+        with:
+          token: ${{ secrets.IONITRON_TOKEN }}
+      - uses: ./.github/workflows/actions/update-reference-screenshots