test(e2e): Add behaviour test for Errors in standard React E2E tests application

Author: lforst

.github/workflows/build.yml

@@ -642,6 +642,7 @@ jobs:
       - name: Run E2E tests
         env:
           E2E_TEST_PUBLISH_SCRIPT_NODE_VERSION: ${{ env.DEFAULT_NODE_VERSION }}
+          E2E_TEST_AUTH_TOKEN: ${{ secrets.E2E_TEST_AUTH_TOKEN }}
         run: |
           cd packages/e2e-tests
           yarn test:e2e

packages/e2e-tests/.gitignore

@@ -0,0 +1 @@
+auth-token.json

packages/e2e-tests/package.json

@@ -13,10 +13,11 @@
     "lint": "run-s lint:prettier lint:eslint",
     "lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",
     "lint:prettier": "prettier --config ../../.prettierrc.json --check .",
-    "test:e2e": "run-s test:validate-configuration test:test-app-setups test:run",
+    "test:e2e": "run-s test:validate-configuration test:validate-test-app-setups test:validate-auth-token test:run",
     "test:run": "ts-node run.ts",
     "test:validate-configuration": "ts-node validate-verdaccio-configuration.ts",
-    "test:test-app-setups": "ts-node validate-test-app-setups.ts"
+    "test:validate-test-app-setups": "ts-node validate-test-app-setups.ts",
+    "test:validate-auth-token": "ts-node validate-auth-token.ts"
   },
   "devDependencies": {
     "@types/glob": "8.0.0",

packages/e2e-tests/run.ts

@@ -16,6 +16,20 @@ const publishScriptNodeVersion = process.env.E2E_TEST_PUBLISH_SCRIPT_NODE_VERSIO
 const DEFAULT_BUILD_TIMEOUT_SECONDS = 60;
 const DEFAULT_TEST_TIMEOUT_SECONDS = 60;
 
+let authToken = process.env.E2E_TEST_AUTH_TOKEN;
+
+try {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-var-requires
+  authToken = require(path.resolve(__dirname, 'auth-token.json')).authToken;
+} catch (e) {
+  console.log('Failed to parse auth-token.json');
+}
+
+if (!authToken) {
+  console.log('No auth token configured!');
+  process.exit(1);
+}
+
 // https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#grouping-log-lines
 function groupCIOutput(groupTitle: string, fn: () => void): void {
   if (process.env.CI) {
@@ -176,6 +190,10 @@ const recipeResults: RecipeResult[] = recipePaths.map(recipePath => {
       cwd: path.dirname(recipePath),
       timeout: (test.timeoutSeconds ?? DEFAULT_TEST_TIMEOUT_SECONDS) * 1000,
       encoding: 'utf8',
+      env: {
+        ...process.env,
+        E2E_TEST_AUTH_TOKEN: authToken,
+      },
       shell: true, // needed so we can pass the test command in as whole without splitting it up into args
     });
 

packages/e2e-tests/test-applications/standard-frontend-react/.gitignore

@@ -23,3 +23,6 @@ yarn-debug.log*
 yarn-error.log*
 
 !*.d.ts
+/test-results/
+/playwright-report/
+/playwright/.cache/

packages/e2e-tests/test-applications/standard-frontend-react/package.json

@@ -20,8 +20,9 @@
     "web-vitals": "2.1.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build"
+    "build": "react-scripts build",
+    "start": "serve -s build",
+    "test": "playwright test"
   },
   "eslintConfig": {
     "extends": [
@@ -40,5 +41,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@playwright/test": "1.26.1",
+    "axios": "1.1.2",
+    "serve": "14.0.1"
   }
 }

packages/e2e-tests/test-applications/standard-frontend-react/playwright.config.ts

@@ -0,0 +1,69 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  /* Maximum time one test can run for. */
+  timeout: 60 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: 0,
+  /* Opt out of parallel tests on CI. */
+  workers: 1,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'dot',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+    // For now we only test Chrome!
+    // {
+    //   name: 'firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox'],
+    //   },
+    // },
+    // {
+    //   name: 'webkit',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'yarn start',
+    port: 3000,
+  },
+};
+
+export default config;

packages/e2e-tests/test-applications/standard-frontend-react/src/globals.d.ts

@@ -0,0 +1,4 @@
+interface Window {
+  recordedTransactions?: string[];
+  capturedExceptionId?: string;
+}

packages/e2e-tests/test-applications/standard-frontend-react/src/index.tsx

@@ -15,7 +15,8 @@ import Index from './pages/Index';
 import User from './pages/User';
 
 Sentry.init({
-  dsn: 'https://[email protected]/1337',
+  // DSN belongs to "e2e-javascript-standard-frontend-react" project in "sentry-sdks" org
+  dsn: 'https://[email protected]/4503941750587392',
   integrations: [
     new BrowserTracing({
       routingInstrumentation: Sentry.reactRouterV6Instrumentation(
@@ -39,10 +40,10 @@ Sentry.addGlobalEventProcessor(event => {
     (event.contexts?.trace?.op === 'pageload' || event.contexts?.trace?.op === 'navigation')
   ) {
     const eventId = event.event_id;
-    // @ts-ignore
-    window.recordedTransactions = window.recordedTransactions || [];
-    // @ts-ignore
-    window.recordedTransactions.push(eventId);
+    if (eventId) {
+      window.recordedTransactions = window.recordedTransactions || [];
+      window.recordedTransactions.push(eventId);
+    }
   }
 
   return event;

packages/e2e-tests/test-applications/standard-frontend-react/src/pages/Index.tsx

@@ -11,7 +11,6 @@ const Index = () => {
         id="exception-button"
         onClick={() => {
           const eventId = Sentry.captureException(new Error('I am an error!'));
-          // @ts-ignore
           window.capturedExceptionId = eventId;
         }}
       />

packages/e2e-tests/test-applications/standard-frontend-react/test-recipe.json

@@ -2,5 +2,10 @@
   "$schema": "../../test-recipe-schema.json",
   "testApplicationName": "standard-frontend-react",
   "buildCommand": "yarn install && yarn build",
-  "tests": []
+  "tests": [
+    {
+      "testName": "Playwright tests",
+      "testCommand": "yarn test"
+    }
+  ]
 }