Skip to content

Commit 45d624f

Browse files
CopilotLms24
Copilot
and
Lms24
authored
fix(e2e): Add op check to waitForTransaction in React Router e2e tests (#20193)
- [x] Analyze the flaky test issue: `waitForTransaction` in pageload tests only checks `transactionEvent.transaction === '/performance'` without verifying `op === 'pageload'`, so it can match navigation transactions in race conditions - [x] Fix `react-router-7-framework-spa/tests/performance/pageload.client.test.ts` - add `op === 'pageload'` check to all `waitForTransaction` callbacks - [x] Fix `react-router-7-framework-spa-node-20-18/tests/performance/pageload.client.test.ts` - same fix - [x] Fix `react-router-7-framework/tests/performance/pageload.client.test.ts` - same fix - [x] Fix `react-router-7-framework-custom/tests/performance/pageload.client.test.ts` - same fix - [x] Fix `react-router-7-framework-node-20-18/tests/performance/pageload.client.test.ts` - same fix - [x] Fix navigation tests in the same apps to add `op === 'navigation'` check where missing (prevents symmetric confusion) - [x] Run validation (Code Review ✅, CodeQL ✅) - [x] Fix formatting issues with `yarn format` --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Lms24 <8420481+Lms24@users.noreply.github.com>
1 parent d190d26 commit 45d624f

File tree

10 files changed

+67
-22
lines changed

10 files changed

+67
-22
lines changed

‎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: 8 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,10 @@ 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' &&
60+
transactionEvent.contexts?.trace?.op === 'pageload'
61+
);
5962
});
6063

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

106109
test('should send pageload transaction for prerendered pages', async ({ page }) => {
107110
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
108-
return transactionEvent.transaction === '/performance/static';
111+
return (
112+
transactionEvent.transaction === '/performance/static' && transactionEvent.contexts?.trace?.op === 'pageload'
113+
);
109114
});
110115

111116
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: 8 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,10 @@ 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' &&
60+
transactionEvent.contexts?.trace?.op === 'pageload'
61+
);
5962
});
6063

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

106109
test('should send pageload transaction for prerendered pages', async ({ page }) => {
107110
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
108-
return transactionEvent.transaction === '/performance/static';
111+
return (
112+
transactionEvent.transaction === '/performance/static' && transactionEvent.contexts?.trace?.op === 'pageload'
113+
);
109114
});
110115

111116
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: 5 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,10 @@ 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' &&
60+
transactionEvent.contexts?.trace?.op === 'pageload'
61+
);
5962
});
6063

6164
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: 5 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,10 @@ 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' &&
60+
transactionEvent.contexts?.trace?.op === 'pageload'
61+
);
5962
});
6063

6164
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: 8 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,10 @@ 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' &&
60+
transactionEvent.contexts?.trace?.op === 'pageload'
61+
);
5962
});
6063

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

106109
test('should send pageload transaction for prerendered pages', async ({ page }) => {
107110
const txPromise = waitForTransaction(APP_NAME, async transactionEvent => {
108-
return transactionEvent.transaction === '/performance/static';
111+
return (
112+
transactionEvent.transaction === '/performance/static' && transactionEvent.contexts?.trace?.op === 'pageload'
113+
);
109114
});
110115

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

0 commit comments

Comments
 (0)