Skip to content

Commit e82db66

Browse files
CopilotLms24
Copilot
and
Lms24
authored
fix(e2e): Add op check to waitForTransaction in React Router e2e tests
Add `transactionEvent.contexts?.trace?.op` checks to all `waitForTransaction` callbacks in React Router e2e performance tests. Previously, the callbacks only checked the transaction name (e.g., `transactionEvent.transaction === '/performance'`), which could match either a pageload or navigation transaction in race conditions. This caused the flaky test failure where a navigation transaction was captured instead of the expected pageload transaction. Pageload tests now include `&& transactionEvent.contexts?.trace?.op === 'pageload'` and navigation tests include `&& transactionEvent.contexts?.trace?.op === 'navigation'`. This follows the pattern already used in `react-router-7-framework-instrumentation` tests. Co-Authored-By: Claude <noreply@anthropic.com> Agent-Logs-Url: https://github.com/getsentry/sentry-javascript/sessions/b44f977f-b777-4975-9077-230d435aed7f Co-authored-by: Lms24 <8420481+Lms24@users.noreply.github.com>
1 parent 9c40d1e commit e82db66

10 files changed

Lines changed: 62 additions & 22 deletions

File tree

‎dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/tests/performance/navigation.client.test.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import { APP_NAME } from '../constants';
55
test.describe('client - navigation performance', () => {
66
test('should create navigation transaction', async ({ page }) => {
77
const navigationPromise = waitForTransaction(APP_NAME, async transactionEvent => {
8-
return transactionEvent.transaction === '/performance/ssr';
8+
return (
9+
transactionEvent.transaction === '/performance/ssr' && transactionEvent.contexts?.trace?.op === 'navigation'
10+
);
911
});
1012

1113
await page.goto(`/performance`); // pageload
@@ -56,7 +58,10 @@ test.describe('client - navigation performance', () => {
5658

5759
test('should update navigation transaction for dynamic routes', async ({ page }) => {
5860
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
59-
return transactionEvent.transaction === '/performance/with/:param';
61+
return (
62+
transactionEvent.transaction === '/performance/with/:param' &&
63+
transactionEvent.contexts?.trace?.op === 'navigation'
64+
);
6065
});
6166

6267
await page.goto(`/performance`); // pageload

‎dev-packages/e2e-tests/test-applications/react-router-7-framework-custom/tests/performance/pageload.client.test.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { APP_NAME } from '../constants';
55
test.describe('client - pageload performance', () => {
66
test('should send pageload transaction', async ({ page }) => {
77
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
8-
return transactionEvent.transaction === '/performance';
8+
return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
99
});
1010

1111
await page.goto(`/performance`);
@@ -55,7 +55,9 @@ test.describe('client - pageload performance', () => {
5555

5656
test('should update pageload transaction for dynamic routes', async ({ page }) => {
5757
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
58-
return transactionEvent.transaction === '/performance/with/:param';
58+
return (
59+
transactionEvent.transaction === '/performance/with/:param' && transactionEvent.contexts?.trace?.op === 'pageload'
60+
);
5961
});
6062

6163
await page.goto(`/performance/with/sentry`);
@@ -105,7 +107,9 @@ test.describe('client - pageload performance', () => {
105107

106108
test('should send pageload transaction for prerendered pages', async ({ page }) => {
107109
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
108-
return transactionEvent.transaction === '/performance/static';
110+
return (
111+
transactionEvent.transaction === '/performance/static' && transactionEvent.contexts?.trace?.op === 'pageload'
112+
);
109113
});
110114

111115
await page.goto(`/performance/static`);

‎dev-packages/e2e-tests/test-applications/react-router-7-framework-node-20-18/tests/performance/navigation.client.test.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import { APP_NAME } from '../constants';
55
test.describe('client - navigation performance', () => {
66
test('should create navigation transaction', async ({ page }) => {
77
const navigationPromise = waitForTransaction(APP_NAME, async transactionEvent => {
8-
return transactionEvent.transaction === '/performance/ssr';
8+
return (
9+
transactionEvent.transaction === '/performance/ssr' && transactionEvent.contexts?.trace?.op === 'navigation'
10+
);
911
});
1012

1113
await page.goto(`/performance`); // pageload
@@ -56,7 +58,10 @@ test.describe('client - navigation performance', () => {
5658

5759
test('should update navigation transaction for dynamic routes', async ({ page }) => {
5860
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
59-
return transactionEvent.transaction === '/performance/with/:param';
61+
return (
62+
transactionEvent.transaction === '/performance/with/:param' &&
63+
transactionEvent.contexts?.trace?.op === 'navigation'
64+
);
6065
});
6166

6267
await page.goto(`/performance`); // pageload

‎dev-packages/e2e-tests/test-applications/react-router-7-framework-node-20-18/tests/performance/pageload.client.test.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { APP_NAME } from '../constants';
55
test.describe('client - pageload performance', () => {
66
test('should send pageload transaction', async ({ page }) => {
77
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
8-
return transactionEvent.transaction === '/performance';
8+
return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
99
});
1010

1111
await page.goto(`/performance`);
@@ -55,7 +55,9 @@ test.describe('client - pageload performance', () => {
5555

5656
test('should update pageload transaction for dynamic routes', async ({ page }) => {
5757
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
58-
return transactionEvent.transaction === '/performance/with/:param';
58+
return (
59+
transactionEvent.transaction === '/performance/with/:param' && transactionEvent.contexts?.trace?.op === 'pageload'
60+
);
5961
});
6062

6163
await page.goto(`/performance/with/sentry`);
@@ -105,7 +107,9 @@ test.describe('client - pageload performance', () => {
105107

106108
test('should send pageload transaction for prerendered pages', async ({ page }) => {
107109
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
108-
return transactionEvent.transaction === '/performance/static';
110+
return (
111+
transactionEvent.transaction === '/performance/static' && transactionEvent.contexts?.trace?.op === 'pageload'
112+
);
109113
});
110114

111115
await page.goto(`/performance/static`);

‎dev-packages/e2e-tests/test-applications/react-router-7-framework-spa-node-20-18/tests/performance/navigation.client.test.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ import { APP_NAME } from '../constants';
55
test.describe('client - navigation performance', () => {
66
test('should update navigation transaction for dynamic routes', async ({ page }) => {
77
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
8-
return transactionEvent.transaction === '/performance/with/:param';
8+
return (
9+
transactionEvent.transaction === '/performance/with/:param' &&
10+
transactionEvent.contexts?.trace?.op === 'navigation'
11+
);
912
});
1013

1114
await page.goto(`/performance`); // pageload

‎dev-packages/e2e-tests/test-applications/react-router-7-framework-spa-node-20-18/tests/performance/pageload.client.test.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { APP_NAME } from '../constants';
55
test.describe('client - pageload performance', () => {
66
test('should send pageload transaction', async ({ page }) => {
77
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
8-
return transactionEvent.transaction === '/performance';
8+
return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
99
});
1010

1111
await page.goto(`/performance`);
@@ -55,7 +55,9 @@ test.describe('client - pageload performance', () => {
5555

5656
test('should update pageload transaction for dynamic routes', async ({ page }) => {
5757
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
58-
return transactionEvent.transaction === '/performance/with/:param';
58+
return (
59+
transactionEvent.transaction === '/performance/with/:param' && transactionEvent.contexts?.trace?.op === 'pageload'
60+
);
5961
});
6062

6163
await page.goto(`/performance/with/sentry`);

‎dev-packages/e2e-tests/test-applications/react-router-7-framework-spa/tests/performance/navigation.client.test.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@ import { APP_NAME } from '../constants';
55
test.describe('client - navigation performance', () => {
66
test('should update navigation transaction for dynamic routes', async ({ page }) => {
77
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
8-
return transactionEvent.transaction === '/performance/with/:param';
8+
return (
9+
transactionEvent.transaction === '/performance/with/:param' &&
10+
transactionEvent.contexts?.trace?.op === 'navigation'
11+
);
912
});
1013

1114
await page.goto(`/performance`); // pageload

‎dev-packages/e2e-tests/test-applications/react-router-7-framework-spa/tests/performance/pageload.client.test.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { APP_NAME } from '../constants';
55
test.describe('client - pageload performance', () => {
66
test('should send pageload transaction', async ({ page }) => {
77
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
8-
return transactionEvent.transaction === '/performance';
8+
return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
99
});
1010

1111
await page.goto(`/performance`);
@@ -55,7 +55,9 @@ test.describe('client - pageload performance', () => {
5555

5656
test('should update pageload transaction for dynamic routes', async ({ page }) => {
5757
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
58-
return transactionEvent.transaction === '/performance/with/:param';
58+
return (
59+
transactionEvent.transaction === '/performance/with/:param' && transactionEvent.contexts?.trace?.op === 'pageload'
60+
);
5961
});
6062

6163
await page.goto(`/performance/with/sentry`);

‎dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/navigation.client.test.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import { APP_NAME } from '../constants';
55
test.describe('client - navigation performance', () => {
66
test('should create navigation transaction', async ({ page }) => {
77
const navigationPromise = waitForTransaction(APP_NAME, async transactionEvent => {
8-
return transactionEvent.transaction === '/performance/ssr';
8+
return (
9+
transactionEvent.transaction === '/performance/ssr' && transactionEvent.contexts?.trace?.op === 'navigation'
10+
);
911
});
1012

1113
await page.goto(`/performance`); // pageload
@@ -56,7 +58,10 @@ test.describe('client - navigation performance', () => {
5658

5759
test('should create navigation transaction when navigating with object `to` prop', async ({ page }) => {
5860
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
59-
return transactionEvent.transaction === '/performance/with/:param';
61+
return (
62+
transactionEvent.transaction === '/performance/with/:param' &&
63+
transactionEvent.contexts?.trace?.op === 'navigation'
64+
);
6065
});
6166

6267
await page.goto(`/performance`); // pageload
@@ -106,7 +111,10 @@ test.describe('client - navigation performance', () => {
106111

107112
test('should update navigation transaction for dynamic routes', async ({ page }) => {
108113
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
109-
return transactionEvent.transaction === '/performance/with/:param';
114+
return (
115+
transactionEvent.transaction === '/performance/with/:param' &&
116+
transactionEvent.contexts?.trace?.op === 'navigation'
117+
);
110118
});
111119

112120
await page.goto(`/performance`); // pageload

‎dev-packages/e2e-tests/test-applications/react-router-7-framework/tests/performance/pageload.client.test.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { APP_NAME } from '../constants';
55
test.describe('client - pageload performance', () => {
66
test('should send pageload transaction', async ({ page }) => {
77
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
8-
return transactionEvent.transaction === '/performance';
8+
return transactionEvent.transaction === '/performance' && transactionEvent.contexts?.trace?.op === 'pageload';
99
});
1010

1111
await page.goto(`/performance`);
@@ -55,7 +55,9 @@ test.describe('client - pageload performance', () => {
5555

5656
test('should update pageload transaction for dynamic routes', async ({ page }) => {
5757
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
58-
return transactionEvent.transaction === '/performance/with/:param';
58+
return (
59+
transactionEvent.transaction === '/performance/with/:param' && transactionEvent.contexts?.trace?.op === 'pageload'
60+
);
5961
});
6062

6163
await page.goto(`/performance/with/sentry`);
@@ -105,7 +107,9 @@ test.describe('client - pageload performance', () => {
105107

106108
test('should send pageload transaction for prerendered pages', async ({ page }) => {
107109
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
108-
return transactionEvent.transaction === '/performance/static';
110+
return (
111+
transactionEvent.transaction === '/performance/static' && transactionEvent.contexts?.trace?.op === 'pageload'
112+
);
109113
});
110114

111115
await page.goto(`/performance/static`);

0 commit comments

Comments
 (0)