ci: use W3C-compliant Sauce Labs tunnelName and remove deprecated tunnelIdentifier

Author: alan-agius4

.github/workflows/pr.yml

@@ -214,3 +214,31 @@ jobs:
         uses: angular/dev-infra/github-actions/bazel/configure-remote@24ba9709ca4bf6548bba6a9abfe2799e90645a60 # main
       - name: Run CLI E2E tests
         run: pnpm bazel test --test_env=E2E_SHARD_TOTAL=6 --test_env=E2E_SHARD_INDEX=${{ matrix.shard }} --config=e2e //tests:e2e.snapshots.${{ matrix.subset }}_node${{ matrix.node }}
+
+  test-saucelabs:
+    needs: build
+    runs-on: ubuntu-latest
+    name: Browser Compatibility Tests
+    env:
+      SAUCE_TUNNEL_IDENTIFIER: 'angular-${{ github.run_number }}'
+    steps:
+      - name: Initialize environment
+        uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@24ba9709ca4bf6548bba6a9abfe2799e90645a60 # main
+      - name: Install node modules
+        run: pnpm install --frozen-lockfile
+      - name: Setup Bazel
+        uses: angular/dev-infra/github-actions/bazel/setup@24ba9709ca4bf6548bba6a9abfe2799e90645a60 # main
+      - name: Setup Bazel RBE
+        uses: angular/dev-infra/github-actions/bazel/configure-remote@24ba9709ca4bf6548bba6a9abfe2799e90645a60 # main
+      - name: Start Sauce Connect
+        uses: saucelabs/sauce-connect-action@cb88b508c6f9ff4d84490093733315dbd55de022 # v3
+        with:
+          username: ${{ vars.SAUCE_USERNAME }}
+          accessKey: ${{ secrets.SAUCE_ACCESS_KEY }}
+          region: us-west-1
+          tunnelName: ${{ env.SAUCE_TUNNEL_IDENTIFIER }}
+      - name: Run E2E Browser tests
+        env:
+          SAUCE_USERNAME: ${{ vars.SAUCE_USERNAME }}
+          SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
+        run: pnpm bazel test --config=saucelabs //tests:e2e.saucelabs

tests/e2e/assets/protractor-saucelabs.conf.js

@@ -64,18 +64,15 @@ exports.config = {
   // NOTE: https://saucelabs.com/products/platform-configurator can be used to determine configuration values
   multiCapabilities: capabilities.map((caps) => {
     const w3cCaps = {
-      ...caps,
+      browserName: caps.browserName,
       browserVersion: caps.version,
       platformName: caps.platform,
     };
 
     if (tunnelIdentifier) {
       return {
         ...w3cCaps,
-        tunnelIdentifier,
-        tunnelName: tunnelIdentifier,
         'sauce:options': {
-          tunnelIdentifier,
           tunnelName: tunnelIdentifier,
         },
       };