test(v9/remix): Fix integration test flakes (#17144)

Backport of #17093

Co-authored-by: Onur Temizkan <onur@narval.co.uk>

Author: AbhiPrasad

packages/remix/test/integration/app/root.tsx

@@ -48,9 +48,9 @@ export const loader: LoaderFunction = async ({ request }) => {
     case 'returnRedirect':
       return redirect('/?type=plain');
     case 'throwRedirectToExternal':
-      throw redirect('https://example.com');
+      throw redirect(`https://docs.sentry.io`);
     case 'returnRedirectToExternal':
-      return redirect('https://example.com');
+      return redirect('https://docs.sentry.io');
     default: {
       return {};
     }

packages/remix/test/integration/test/client/root-loader.test.ts

@@ -1,4 +1,4 @@
-import { type Page, expect, test } from '@playwright/test';
+import { type Page, expect, test, chromium } from '@playwright/test';
 
 async function getRouteData(page: Page): Promise<any> {
   return page.evaluate('window.__remixContext.state.loaderData').catch(err => {
@@ -22,7 +22,6 @@ async function extractTraceAndBaggageFromMeta(
 
 test('should inject `sentry-trace` and `baggage` into root loader returning an empty object.', async ({ page }) => {
   await page.goto('/?type=empty');
-
   const { sentryTrace, sentryBaggage } = await extractTraceAndBaggageFromMeta(page);
 
   expect(sentryTrace).toMatch(/.+/);
@@ -38,7 +37,6 @@ test('should inject `sentry-trace` and `baggage` into root loader returning an e
 
 test('should inject `sentry-trace` and `baggage` into root loader returning a plain object.', async ({ page }) => {
   await page.goto('/?type=plain');
-
   const { sentryTrace, sentryBaggage } = await extractTraceAndBaggageFromMeta(page);
 
   expect(sentryTrace).toMatch(/.+/);
@@ -56,7 +54,6 @@ test('should inject `sentry-trace` and `baggage` into root loader returning a pl
 
 test('should inject `sentry-trace` and `baggage` into root loader returning a `JSON response`.', async ({ page }) => {
   await page.goto('/?type=json');
-
   const { sentryTrace, sentryBaggage } = await extractTraceAndBaggageFromMeta(page);
 
   expect(sentryTrace).toMatch(/.+/);
@@ -74,7 +71,6 @@ test('should inject `sentry-trace` and `baggage` into root loader returning a `J
 
 test('should inject `sentry-trace` and `baggage` into root loader returning a deferred response', async ({ page }) => {
   await page.goto('/?type=defer');
-
   const { sentryTrace, sentryBaggage } = await extractTraceAndBaggageFromMeta(page);
 
   expect(sentryTrace).toMatch(/.+/);
@@ -90,7 +86,6 @@ test('should inject `sentry-trace` and `baggage` into root loader returning a de
 
 test('should inject `sentry-trace` and `baggage` into root loader returning `null`.', async ({ page }) => {
   await page.goto('/?type=null');
-
   const { sentryTrace, sentryBaggage } = await extractTraceAndBaggageFromMeta(page);
 
   expect(sentryTrace).toMatch(/.+/);
@@ -106,7 +101,6 @@ test('should inject `sentry-trace` and `baggage` into root loader returning `nul
 
 test('should inject `sentry-trace` and `baggage` into root loader returning `undefined`.', async ({ page }) => {
   await page.goto('/?type=undefined');
-
   const { sentryTrace, sentryBaggage } = await extractTraceAndBaggageFromMeta(page);
 
   expect(sentryTrace).toMatch(/.+/);
@@ -124,12 +118,11 @@ test('should inject `sentry-trace` and `baggage` into root loader throwing a red
   page,
 }) => {
   await page.goto('/?type=throwRedirect');
+  const { sentryTrace, sentryBaggage } = await extractTraceAndBaggageFromMeta(page);
 
   // We should be successfully redirected to the path.
   expect(page.url()).toEqual(expect.stringContaining('/?type=plain'));
 
-  const { sentryTrace, sentryBaggage } = await extractTraceAndBaggageFromMeta(page);
-
   expect(sentryTrace).toMatch(/.+/);
   expect(sentryBaggage).toMatch(/.+/);
 
@@ -143,14 +136,14 @@ test('should inject `sentry-trace` and `baggage` into root loader throwing a red
 
 test('should inject `sentry-trace` and `baggage` into root loader returning a redirection to valid path.', async ({
   page,
+  baseURL,
 }) => {
-  await page.goto('/?type=returnRedirect');
+  await page.goto(`${baseURL}/?type=returnRedirect`);
+  const { sentryTrace, sentryBaggage } = await extractTraceAndBaggageFromMeta(page);
 
   // We should be successfully redirected to the path.
   expect(page.url()).toEqual(expect.stringContaining('/?type=plain'));
 
-  const { sentryTrace, sentryBaggage } = await extractTraceAndBaggageFromMeta(page);
-
   expect(sentryTrace).toMatch(/.+/);
   expect(sentryBaggage).toMatch(/.+/);
 
@@ -162,23 +155,22 @@ test('should inject `sentry-trace` and `baggage` into root loader returning a re
   });
 });
 
-test('should return redirect to an external path with no baggage and trace injected.', async ({ page }) => {
-  await page.goto('/?type=returnRedirectToExternal');
+test('should return redirect to an external path with no baggage and trace injected.', async ({ page, baseURL }) => {
+  await page.goto(`${baseURL}/?type=returnRedirectToExternal`);
 
-  // We should be successfully redirected to the external path.
-  expect(page.url()).toEqual(expect.stringContaining('https://example.com'));
+  expect(page.url()).toEqual(expect.stringContaining('docs.sentry.io'));
 
   const { sentryTrace, sentryBaggage } = await extractTraceAndBaggageFromMeta(page);
 
   expect(sentryTrace).toBeUndefined();
   expect(sentryBaggage).toBeUndefined();
 });
 
-test('should throw redirect to an external path with no baggage and trace injected.', async ({ page }) => {
-  await page.goto('/?type=throwRedirectToExternal');
+test('should throw redirect to an external path with no baggage and trace injected.', async ({ page, baseURL }) => {
+  await page.goto(`${baseURL}/?type=throwRedirectToExternal`);
 
   // We should be successfully redirected to the external path.
-  expect(page.url()).toEqual(expect.stringContaining('https://example.com'));
+  expect(page.url()).toEqual(expect.stringContaining('docs.sentry.io'));
 
   const { sentryTrace, sentryBaggage } = await extractTraceAndBaggageFromMeta(page);