feat(tests): Run Playwright tests using bundles. (#4551)

Co-authored-by: Katie Byers <[email protected]>

Author: onurtemizkan

.github/workflows/build.yml

@@ -276,9 +276,26 @@ jobs:
             ${{ github.workspace }}/packages/serverless/dist-awslambda-layer/*.zip
 
   job_browser_playwright_tests:
-    name: Browser Playwright Tests
+    name: Browser Playwright Tests (${{ matrix.bundle }} - tracing_only = ${{ matrix.tracing_only }})
     needs: job_build
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        bundle:
+          - esm
+          - cjs
+          - bundle_es5
+          - bundle_es5_min
+          - bundle_es6
+          - bundle_es6_min
+        tracing_only:
+          - true
+          - false
+        exclude:
+          - bundle: esm
+            tracing_only: true
+          - bundle: cjs
+            tracing_only: true
     steps:
       - name: Check out current commit (${{ github.sha }})
         uses: actions/checkout@v2
@@ -297,6 +314,9 @@ jobs:
           path: ${{ env.CACHED_BUILD_PATHS }}
           key: ${{ env.BUILD_CACHE_KEY }}
       - name: Run Playwright tests
+        env:
+          PW_BUNDLE: ${{ matrix.bundle }}
+          PW_TRACING_ONLY: ${{ matrix.tracing_only }}
         run: |
           cd packages/integration-tests
           yarn run playwright install-deps webkit

packages/integration-tests/README.md

@@ -56,6 +56,9 @@ To filter tests by their title:
 
 You can refer to [Playwright documentation](https://playwright.dev/docs/test-cli) for other CLI options.
 
+You can set env variable `PW_BUNDLE` to set specific build or bundle to test against.
+Available options: `esm`, `cjs`, `bundle_es5`, `bundle_es5_min`, `bundle_es6`, `bundle_es6_min`
+
 ### Troubleshooting
 
 Apart from [Playwright-specific issues](https://playwright.dev/docs/troubleshooting), below are common issues that might occur while writing tests for Sentry Browser SDK.

packages/integration-tests/package.json

@@ -13,16 +13,21 @@
     "lint": "run-s lint:prettier lint:eslint",
     "lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",
     "lint:prettier": "prettier --check \"{suites,utils}/**/*.ts\"",
-    "test:ci": "playwright test ./suites --browser='all' --reporter='line'",
     "type-check": "tsc",
     "pretest": "yarn clean && yarn type-check",
-    "test": "playwright test ./suites"
+    "test": "playwright test ./suites",
+    "test:bundle:es5": "PW_BUNDLE=bundle_es5 yarn test",
+    "test:bundle:es5:min": "PW_BUNDLE=bundle_es5_min yarn test",
+    "test:bundle:es6": "PW_BUNDLE=bundle_es6 yarn test",
+    "test:bundle:es6:min": "PW_BUNDLE=bundle_es6_min yarn test",
+    "test:cjs": "PW_BUNDLE=cjs yarn test",
+    "test:esm": "PW_BUNDLE=esm yarn test",
+    "test:ci": "playwright test ./suites --browser='all' --reporter='line'"
   },
   "dependencies": {
     "@babel/preset-typescript": "^7.16.7",
     "@playwright/test": "^1.17.0",
     "babel-loader": "^8.2.2",
-    "handlebars-loader": "^1.7.1",
     "html-webpack-plugin": "^5.5.0",
     "playwright": "^1.17.1",
     "typescript": "^4.5.2",