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 () {

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

@@ -32,7 +32,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/xhr/post/subject.js

@@ -1,6 +1,6 @@
 const xhr = new XMLHttpRequest();
 
-xhr.open('POST', 'http://localhost:7654/foo');
+xhr.open('POST', 'http://sentry-test.io/foo');
 xhr.setRequestHeader('Accept', 'application/json');
 xhr.setRequestHeader('Content-Type', 'application/json');
 xhr.send('{"my":"body"}');

dev-packages/browser-integration-tests/suites/integrations/Breadcrumbs/xhr/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/httpclient/axios/subject.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 axios
-  .get('http://localhost:7654/foo', {
+  .get('http://sentry-test.io/foo', {
     headers: { Accept: 'application/json', 'Content-Type': 'application/json', Cache: 'no-cache' },
   })
   .then(response => {

dev-packages/browser-integration-tests/suites/integrations/httpclient/axios/test.ts

@@ -44,7 +44,7 @@ sentryTest(
         ],
       },
       request: {
-        url: 'http://localhost:7654/foo',
+        url: 'http://sentry-test.io/foo',
         method: 'GET',
         headers: {
           accept: 'application/json',

dev-packages/browser-integration-tests/suites/integrations/httpclient/fetch/simple/subject.js

@@ -1,4 +1,4 @@
-fetch('http://localhost:7654/foo', {
+fetch('http://sentry-test.io/foo', {
   method: 'GET',
   credentials: 'include',
   headers: {

dev-packages/browser-integration-tests/suites/integrations/httpclient/fetch/simple/test.ts

@@ -46,7 +46,7 @@ sentryTest(
         ],
       },
       request: {
-        url: 'http://localhost:7654/foo',
+        url: 'http://sentry-test.io/foo',
         method: 'GET',
         headers: {
           accept: 'application/json',

dev-packages/browser-integration-tests/suites/integrations/httpclient/fetch/withAbortController/subject.js

@@ -10,7 +10,7 @@ const startFetch = e => {
       forceTransaction: true,
     },
     async () => {
-      await fetch('http://localhost:7654/foo', { signal })
+      await fetch('http://sentry-test.io/foo', { signal })
         .then(response => response.json())
         .then(data => {
           console.log('Fetch succeeded:', data);

dev-packages/browser-integration-tests/suites/integrations/httpclient/fetch/withRequest/subject.js

@@ -1,4 +1,4 @@
-const request = new Request('http://localhost:7654/foo', {
+const request = new Request('http://sentry-test.io/foo', {
   method: 'POST',
   credentials: 'include',
   headers: {

dev-packages/browser-integration-tests/suites/integrations/httpclient/fetch/withRequest/test.ts

@@ -42,7 +42,7 @@ sentryTest('works with a Request passed in', async ({ getLocalTestPath, page })
       ],
     },
     request: {
-      url: 'http://localhost:7654/foo',
+      url: 'http://sentry-test.io/foo',
       method: 'POST',
       headers: {
         accept: 'application/json',

dev-packages/browser-integration-tests/suites/integrations/httpclient/fetch/withRequestAndBodyAndOptions/subject.js

@@ -1,4 +1,4 @@
-const request = new Request('http://localhost:7654/foo', {
+const request = new Request('http://sentry-test.io/foo', {
   method: 'POST',
   credentials: 'include',
   headers: {

dev-packages/browser-integration-tests/suites/integrations/httpclient/fetch/withRequestAndBodyAndOptions/test.ts

@@ -44,7 +44,7 @@ sentryTest(
         ],
       },
       request: {
-        url: 'http://localhost:7654/foo',
+        url: 'http://sentry-test.io/foo',
         method: 'POST',
         headers: {
           accept: 'application/json',

dev-packages/browser-integration-tests/suites/integrations/httpclient/fetch/withRequestAndOptions/subject.js

@@ -1,4 +1,4 @@
-const request = new Request('http://localhost:7654/foo', {
+const request = new Request('http://sentry-test.io/foo', {
   method: 'POST',
   credentials: 'include',
   headers: {

dev-packages/browser-integration-tests/suites/integrations/httpclient/fetch/withRequestAndOptions/test.ts

@@ -42,7 +42,7 @@ sentryTest('works with a Request (without body) & options passed in', async ({ g
       ],
     },
     request: {
-      url: 'http://localhost:7654/foo',
+      url: 'http://sentry-test.io/foo',
       method: 'POST',
       headers: {
         accept: 'application/json',

dev-packages/browser-integration-tests/suites/integrations/httpclient/httpClientIntegration/subject.js

@@ -1,6 +1,6 @@
 const xhr = new XMLHttpRequest();
 
-xhr.open('GET', 'http://localhost:7654/foo', true);
+xhr.open('GET', 'http://sentry-test.io/foo', true);
 xhr.withCredentials = true;
 xhr.setRequestHeader('Accept', 'application/json');
 xhr.setRequestHeader('Content-Type', 'application/json');

dev-packages/browser-integration-tests/suites/integrations/httpclient/httpClientIntegration/test.ts

@@ -42,7 +42,7 @@ sentryTest('works with httpClientIntegration', async ({ getLocalTestPath, page }
       ],
     },
     request: {
-      url: 'http://localhost:7654/foo',
+      url: 'http://sentry-test.io/foo',
       method: 'GET',
       headers: {
         accept: 'application/json',

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

@@ -1,6 +1,6 @@
 const xhr = new XMLHttpRequest();
 
-xhr.open('GET', 'http://localhost:7654/foo', true);
+xhr.open('GET', 'http://sentry-test.io/foo', true);
 xhr.withCredentials = true;
 xhr.setRequestHeader('Accept', 'application/json');
 xhr.setRequestHeader('Content-Type', 'application/json');

dev-packages/browser-integration-tests/suites/integrations/httpclient/xhr/test.ts

@@ -44,7 +44,7 @@ sentryTest(
         ],
       },
       request: {
-        url: 'http://localhost:7654/foo',
+        url: 'http://sentry-test.io/foo',
         method: 'GET',
         headers: {
           accept: 'application/json',

dev-packages/browser-integration-tests/suites/public-api/init/built-pkg/test.ts

@@ -6,14 +6,14 @@ import { expect } from '@playwright/test';
 import { sentryTest } from '../../../../utils/fixtures';
 
 // Regression test against https://github.com/getsentry/sentry-javascript/pull/1896
-sentryTest('should not contain tslib_1__default', async ({ getLocalTestPath }) => {
-  await getLocalTestPath({ testDir: __dirname });
+sentryTest('should not contain tslib_1__default', async ({ getLocalTestUrl }) => {
+  const tmpDir = await getLocalTestUrl({ testDir: __dirname, skipRouteHandler: true });
 
-  const initBundle = fs.readFileSync(path.join(__dirname, 'dist', 'init.bundle.js'), 'utf-8');
+  const initBundle = fs.readFileSync(path.join(tmpDir, 'init.bundle.js'), 'utf-8');
   expect(initBundle.length).toBeGreaterThan(0);
   expect(initBundle).not.toContain('tslib_1__default');
 
-  const subjectBundle = fs.readFileSync(path.join(__dirname, 'dist', 'subject.bundle.js'), 'utf-8');
+  const subjectBundle = fs.readFileSync(path.join(tmpDir, 'subject.bundle.js'), 'utf-8');
   expect(subjectBundle.length).toBeGreaterThan(0);
   expect(subjectBundle).not.toContain('tslib_1__default');
 });

dev-packages/browser-integration-tests/suites/replay/captureReplay/test.ts

@@ -34,7 +34,7 @@ sentryTest('should capture replays (@sentry/browser export)', async ({ getLocalT
     timestamp: expect.any(Number),
     error_ids: [],
     trace_ids: [],
-    urls: [expect.stringContaining('/dist/index.html')],
+    urls: [expect.stringMatching(/\/dist\/([\w-]+)\/index\.html$/)],
     replay_id: expect.stringMatching(/\w{32}/),
     replay_start_timestamp: expect.any(Number),
     segment_id: 0,
@@ -57,7 +57,7 @@ sentryTest('should capture replays (@sentry/browser export)', async ({ getLocalT
       name: 'sentry.javascript.browser',
     },
     request: {
-      url: expect.stringContaining('/dist/index.html'),
+      url: expect.stringMatching(/\/dist\/([\w-]+)\/index\.html$/),
       headers: {
         'User-Agent': expect.stringContaining(''),
       },
@@ -94,7 +94,7 @@ sentryTest('should capture replays (@sentry/browser export)', async ({ getLocalT
       name: 'sentry.javascript.browser',
     },
     request: {
-      url: expect.stringContaining('/dist/index.html'),
+      url: expect.stringMatching(/\/dist\/([\w-]+)\/index\.html$/),
       headers: {
         'User-Agent': expect.stringContaining(''),
       },

dev-packages/browser-integration-tests/suites/replay/captureReplayFromReplayPackage/test.ts

@@ -34,7 +34,7 @@ sentryTest('should capture replays (@sentry-internal/replay export)', async ({ g
     timestamp: expect.any(Number),
     error_ids: [],
     trace_ids: [],
-    urls: [expect.stringContaining('/dist/index.html')],
+    urls: [expect.stringMatching(/\/dist\/([\w-]+)\/index\.html$/)],
     replay_id: expect.stringMatching(/\w{32}/),
     replay_start_timestamp: expect.any(Number),
     segment_id: 0,
@@ -57,7 +57,7 @@ sentryTest('should capture replays (@sentry-internal/replay export)', async ({ g
       name: 'sentry.javascript.browser',
     },
     request: {
-      url: expect.stringContaining('/dist/index.html'),
+      url: expect.stringMatching(/\/dist\/([\w-]+)\/index\.html$/),
       headers: {
         'User-Agent': expect.stringContaining(''),
       },
@@ -94,7 +94,7 @@ sentryTest('should capture replays (@sentry-internal/replay export)', async ({ g
       name: 'sentry.javascript.browser',
     },
     request: {
-      url: expect.stringContaining('/dist/index.html'),
+      url: expect.stringMatching(/\/dist\/([\w-]+)\/index\.html$/),
       headers: {
         'User-Agent': expect.stringContaining(''),
       },

dev-packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureRequestBody/init.js

@@ -6,7 +6,7 @@ window.Replay = Sentry.replayIntegration({
   flushMaxDelay: 200,
   minReplayDuration: 0,
 
-  networkDetailAllowUrls: ['http://localhost:7654/foo', 'http://sentry-test.io/foo'],
+  networkDetailAllowUrls: ['http://sentry-test.io/foo'],
   networkCaptureBodies: true,
 });