un-flake XHR/fetch tests

Author: mydea

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/contentLengthHeader/subject.js

@@ -1,8 +1,7 @@
 import { expect } from '@playwright/test';
-import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
 import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
 
 sentryTest('parses response_body_size from Content-Length header if available', async ({ getLocalTestPath, page }) => {
@@ -23,9 +22,27 @@ sentryTest('parses response_body_size from Content-Length header if available',
     });
   });
 
+  const requestPromise = waitForErrorRequest(page);
   const url = await getLocalTestPath({ testDir: __dirname });
+  await page.goto(url);
 
-  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  await page.evaluate(() => {
+    /* eslint-disable */
+    fetch('http://localhost:7654/foo', {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Cache: 'no-cache',
+      },
+    }).then(() => {
+      // @ts-ignore Sentry is a global
+      Sentry.captureException('test error');
+    });
+    /* eslint-enable */
+  });
+
+  const request = await requestPromise;
+  const eventData = envelopeRequestParser(request);
 
   expect(eventData.exception?.values).toHaveLength(1);
 

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/contentLengthHeader/test.ts

@@ -1,8 +1,7 @@
 import { expect } from '@playwright/test';
-import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
 import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
 
 sentryTest('does not capture response_body_size without Content-Length header', async ({ getLocalTestPath, page }) => {
@@ -23,9 +22,27 @@ sentryTest('does not capture response_body_size without Content-Length header',
     });
   });
 
+  const requestPromise = waitForErrorRequest(page);
   const url = await getLocalTestPath({ testDir: __dirname });
+  await page.goto(url);
 
-  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  await page.evaluate(() => {
+    /* eslint-disable */
+    fetch('http://localhost:7654/foo', {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Cache: 'no-cache',
+      },
+    }).then(() => {
+      // @ts-ignore Sentry is a global
+      Sentry.captureException('test error');
+    });
+    /* eslint-enable */
+  });
+
+  const request = await requestPromise;
+  const eventData = envelopeRequestParser(request);
 
   expect(eventData.exception?.values).toHaveLength(1);
 

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/noContentLengthHeader/subject.js

@@ -1,8 +1,7 @@
 import { expect } from '@playwright/test';
-import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
 import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
 
 sentryTest('calculates body sizes for non-string bodies', async ({ getLocalTestPath, page }) => {
@@ -20,9 +19,31 @@ sentryTest('calculates body sizes for non-string bodies', async ({ getLocalTestP
     });
   });
 
+  const requestPromise = waitForErrorRequest(page);
   const url = await getLocalTestPath({ testDir: __dirname });
+  await page.goto(url);
 
-  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  await page.evaluate(() => {
+    /* eslint-disable */
+    const blob = new Blob(['<html>Hello world!!</html>'], { type: 'text/html' });
+
+    fetch('http://localhost:7654/foo', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Cache: 'no-cache',
+      },
+      body: blob,
+    }).then(() => {
+      // @ts-ignore Sentry is a global
+      Sentry.captureException('test error');
+    });
+    /* eslint-enable */
+  });
+
+  const request = await requestPromise;
+  const eventData = envelopeRequestParser(request);
 
   expect(eventData.exception?.values).toHaveLength(1);
 

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/noContentLengthHeader/test.ts

@@ -1,8 +1,7 @@
 import { expect } from '@playwright/test';
-import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
 import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
 
 sentryTest('captures request_body_size when body is sent', async ({ getLocalTestPath, page }) => {
@@ -22,9 +21,29 @@ sentryTest('captures request_body_size when body is sent', async ({ getLocalTest
     });
   });
 
+  const requestPromise = waitForErrorRequest(page);
   const url = await getLocalTestPath({ testDir: __dirname });
+  await page.goto(url);
 
-  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  await page.evaluate(() => {
+    /* eslint-disable */
+    fetch('http://localhost:7654/foo', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Cache: 'no-cache',
+      },
+      body: '{"foo":"bar"}',
+    }).then(() => {
+      // @ts-ignore Sentry is a global
+      Sentry.captureException('test error');
+    });
+    /* eslint-enable */
+  });
+
+  const request = await requestPromise;
+  const eventData = envelopeRequestParser(request);
 
   expect(eventData.exception?.values).toHaveLength(1);
 

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/nonTextBody/subject.js

@@ -1,8 +1,7 @@
 import { expect } from '@playwright/test';
-import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
 import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
 
 sentryTest('parses response_body_size from Content-Length header if available', async ({ getLocalTestPath, page }) => {
@@ -23,9 +22,31 @@ sentryTest('parses response_body_size from Content-Length header if available',
     });
   });
 
+  const requestPromise = waitForErrorRequest(page);
   const url = await getLocalTestPath({ testDir: __dirname });
+  await page.goto(url);
 
-  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  await page.evaluate(() => {
+    /* eslint-disable */
+    const xhr = new XMLHttpRequest();
+
+    xhr.open('GET', 'http://localhost:7654/foo');
+    xhr.setRequestHeader('Accept', 'application/json');
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.setRequestHeader('Cache', 'no-cache');
+    xhr.send();
+
+    xhr.addEventListener('readystatechange', function () {
+      if (xhr.readyState === 4) {
+        // @ts-ignore Sentry is a global
+        Sentry.captureException('test error');
+      }
+    });
+    /* eslint-enable */
+  });
+
+  const request = await requestPromise;
+  const eventData = envelopeRequestParser(request);
 
   expect(eventData.exception?.values).toHaveLength(1);
 

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/nonTextBody/test.ts

@@ -1,8 +1,7 @@
 import { expect } from '@playwright/test';
-import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
 import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
 
 sentryTest('captures response_body_size without Content-Length header', async ({ getLocalTestPath, page }) => {
@@ -23,9 +22,31 @@ sentryTest('captures response_body_size without Content-Length header', async ({
     });
   });
 
+  const requestPromise = waitForErrorRequest(page);
   const url = await getLocalTestPath({ testDir: __dirname });
+  await page.goto(url);
 
-  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  await page.evaluate(() => {
+    /* eslint-disable */
+    const xhr = new XMLHttpRequest();
+
+    xhr.open('GET', 'http://localhost:7654/foo');
+    xhr.setRequestHeader('Accept', 'application/json');
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.setRequestHeader('Cache', 'no-cache');
+    xhr.send();
+
+    xhr.addEventListener('readystatechange', function () {
+      if (xhr.readyState === 4) {
+        // @ts-ignore Sentry is a global
+        Sentry.captureException('test error');
+      }
+    });
+    /* eslint-enable */
+  });
+
+  const request = await requestPromise;
+  const eventData = envelopeRequestParser(request);
 
   expect(eventData.exception?.values).toHaveLength(1);
 

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/requestBody/subject.js

@@ -1,8 +1,7 @@
 import { expect } from '@playwright/test';
-import type { Event } from '@sentry/types';
 
 import { sentryTest } from '../../../../../utils/fixtures';
-import { getFirstSentryEnvelopeRequest } from '../../../../../utils/helpers';
+import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
 import { shouldSkipReplayTest } from '../../../../../utils/replayHelpers';
 
 sentryTest('calculates body sizes for non-string bodies', async ({ getLocalTestPath, page }) => {
@@ -20,9 +19,33 @@ sentryTest('calculates body sizes for non-string bodies', async ({ getLocalTestP
     });
   });
 
+  const requestPromise = waitForErrorRequest(page);
   const url = await getLocalTestPath({ testDir: __dirname });
+  await page.goto(url);
 
-  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+  await page.evaluate(() => {
+    /* eslint-disable */
+    const xhr = new XMLHttpRequest();
+
+    const blob = new Blob(['<html>Hello world!!</html>'], { type: 'text/html' });
+
+    xhr.open('POST', 'http://localhost:7654/foo');
+    xhr.setRequestHeader('Accept', 'application/json');
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.setRequestHeader('Cache', 'no-cache');
+    xhr.send(blob);
+
+    xhr.addEventListener('readystatechange', function () {
+      if (xhr.readyState === 4) {
+        // @ts-ignore Sentry is a global
+        Sentry.captureException('test error');
+      }
+    });
+    /* eslint-enable */
+  });
+
+  const request = await requestPromise;
+  const eventData = envelopeRequestParser(request);
 
   expect(eventData.exception?.values).toHaveLength(1);