test: Ensure browser-integration-tests cannot conflict due to build (#13338)

This streamlines some stuff in our browser integration tests, to fix
some flakiness (hopefully).

The biggest change is that instead of always building into `dist` for
each test file, each test will now build into a random subfolder, e.g.
`dist/abc`. This way, multiple tests in a single file will never
conflict with each other.

Additionally it also streamlines some of the tests I encountered while
looking at stuff, hopefully reducing flakes further.

Closes #13321

Author: mydea

dev-packages/browser-integration-tests/loader-suites/loader/noOnLoad/sdkLoadedInMeanwhile/test.ts

@@ -1,5 +1,5 @@
-import fs from 'fs';
-import path from 'path';
+import * as fs from 'fs';
+import * as path from 'path';
 import { expect } from '@playwright/test';
 
 import { TEST_HOST, sentryTest } from '../../../../utils/fixtures';
@@ -28,19 +28,22 @@ sentryTest('it does not download the SDK if the SDK was loaded in the meanwhile'
     });
   });
 
+  const tmpDir = await getLocalTestUrl({ testDir: __dirname, skipRouteHandler: true });
+
   await page.route(`${TEST_HOST}/*.*`, route => {
     const file = route.request().url().split('/').pop();
 
     if (file === 'cdn.bundle.js') {
       cdnLoadedCount++;
     }
 
-    const filePath = path.resolve(__dirname, `./dist/${file}`);
+    const filePath = path.resolve(tmpDir, `./${file}`);
 
     return fs.existsSync(filePath) ? route.fulfill({ path: filePath }) : route.continue();
   });
 
-  const url = await getLocalTestUrl({ testDir: __dirname, skipRouteHandler: true });
+  const url = `${TEST_HOST}/index.html`;
+
   const req = await waitForErrorRequestOnUrl(page, url);
 
   const eventData = envelopeRequestParser(req);

dev-packages/browser-integration-tests/playwright.config.ts

@@ -31,6 +31,7 @@ const config: PlaywrightTestConfig = {
   ],
 
   globalSetup: require.resolve('./playwright.setup.ts'),
+  globalTeardown: require.resolve('./playwright.teardown.ts'),
 };
 
 export default config;

dev-packages/browser-integration-tests/playwright.teardown.ts

@@ -0,0 +1,5 @@
+import * as childProcess from 'child_process';
+
+export default function globalTeardown(): void {
+  childProcess.execSync('yarn clean', { stdio: 'inherit', cwd: process.cwd() });
+}

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/get/subject.js

@@ -1,3 +1,3 @@
-fetch('http://localhost:7654/foo').then(() => {
+fetch('http://sentry-test.io/foo').then(() => {
   Sentry.captureException('test error');
 });

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/get/test.ts

@@ -31,7 +31,7 @@ sentryTest('captures Breadcrumb for basic GET request', async ({ getLocalTestUrl
     data: {
       method: 'GET',
       status_code: 200,
-      url: 'http://localhost:7654/foo',
+      url: 'http://sentry-test.io/foo',
     },
   });
 });

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/getWithRequestObj/subject.js

@@ -1,3 +1,3 @@
-fetch(new Request('http://localhost:7654/foo')).then(() => {
+fetch(new Request('http://sentry-test.io/foo')).then(() => {
   Sentry.captureException('test error');
 });

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/getWithRequestObj/test.ts

@@ -31,7 +31,7 @@ sentryTest('captures Breadcrumb for basic GET request that uses request object',
     data: {
       method: 'GET',
       status_code: 200,
-      url: 'http://localhost:7654/foo',
+      url: 'http://sentry-test.io/foo',
     },
   });
 });

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/post/subject.js

@@ -1,4 +1,4 @@
-fetch('http://localhost:7654/foo', {
+fetch('http://sentry-test.io/foo', {
   method: 'POST',
   body: '{"my":"body"}',
   headers: {

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/fetch/post/test.ts

@@ -31,7 +31,7 @@ sentryTest('captures Breadcrumb for POST request', async ({ getLocalTestUrl, pag
     data: {
       method: 'POST',
       status_code: 200,
-      url: 'http://localhost:7654/foo',
+      url: 'http://sentry-test.io/foo',
     },
   });
 });

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/xhr/get/subject.js

@@ -1,6 +1,6 @@
 const xhr = new XMLHttpRequest();
 
-xhr.open('GET', 'http://localhost:7654/foo');
+xhr.open('GET', 'http://sentry-test.io/foo');
 xhr.send();
 
 xhr.addEventListener('readystatechange', function () {