Skip to content

Commit afffdac

Browse files
Lms24Lms24
authored
test(replay): Test replay recording across multiple pages and navigations (#7212)
Add a Playwright integration test to test replay recording data across multiple pages, therefore, kind of simulating an actual user session. Specifically, we check that for each navigation that we send * the correct performance spans * the correct breadcrumbs * correct full and incremental DOM snapshots
1 parent 09c6cbe commit afffdac

31 files changed

+2178
-6
lines changed

‎packages/integration-tests/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ Each case group has a default HTML skeleton named `template.hbs`, and also a def
1212

1313
`test.ts` is required for each test case, which contains the assertions (and if required the script injection logic). For every case, any set of `init.js`, `template.hbs` and `subject.js` can be defined locally, and each one of them will have precedence over the default definitions of the test group.
1414

15+
To test page multi-page navigations, you can specify additional `page-*.html` (e.g. `page-0.html`, `page-1.html`) files. These will also be compiled and initialized with the same `init.js` and `subject.js` files that are applied to `template.hbs/html`. Note: `page-*.html` file lookup **doesn not** fall back to the
16+
parent directories, meaning that page files have to be directly in the `test.ts` directory.
17+
1518
```
1619
suites/
1720
|---- breadcrumbs/
@@ -23,6 +26,7 @@ suites/
2326
|---- init.js [optional case specific init]
2427
|---- subject.js [optional case specific subject]
2528
|---- test.ts [assertions]
29+
|---- page-*.html [optional, NO fallback!]
2630
```
2731

2832
## Writing Tests

‎packages/integration-tests/suites/replay/multiple-pages/init.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import * as Sentry from '@sentry/browser';
2+
3+
window.Sentry = Sentry;
4+
window.Replay = new Sentry.Replay({
5+
flushMinDelay: 500,
6+
flushMaxDelay: 500,
7+
});
8+
9+
Sentry.init({
10+
dsn: 'https://[email protected]/1337',
11+
sampleRate: 0,
12+
replaysSessionSampleRate: 1.0,
13+
replaysOnErrorSampleRate: 0,
14+
15+
integrations: [window.Replay],
16+
});

‎packages/integration-tests/suites/replay/multiple-pages/page-0.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
</head>
6+
<body>
7+
<h1>Secondary Page</h1>
8+
<button id="go-background">New Tab</button>
9+
<button id="spa-navigation">Mimic a SPA navigation</button>
10+
<!-- Template.html becomes index.html during test execution-->
11+
<a href="./index.html">Go Back to first page</a>
12+
</body>
13+
</html>

‎packages/integration-tests/suites/replay/multiple-pages/subject.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
document.getElementById('go-background').addEventListener('click', () => {
2+
Object.defineProperty(document, 'hidden', { value: true, writable: true });
3+
const ev = document.createEvent('Event');
4+
ev.initEvent('visibilitychange');
5+
document.dispatchEvent(ev);
6+
});
7+
8+
document.getElementById('spa-navigation').addEventListener('click', () => {
9+
window.history.pushState({}, '', '/spa');
10+
});

‎packages/integration-tests/suites/replay/multiple-pages/template.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
</head>
6+
<body>
7+
<button id="go-background">New Tab</button>
8+
<a href="./page-0.html">Go To new page</a>
9+
</body>
10+
</html>

0 commit comments

Comments
 (0)