Skip to content

test(replay): Test replay recording across multiple pages and navigations #7212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 17, 2023
Merged

test(replay): Test replay recording across multiple pages and navigations #7212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cf1b367
test(replay): Add "multiple pages" integration test
Lms24 Feb 16, 2023
0b3bf59
normalize snashot strings and fix LCP span
Lms24 Feb 17, 2023
97891f0
fix lcp span
Lms24 Feb 17, 2023
9fe6f02
add missing privacy snapshot
Lms24 Feb 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/integration-tests/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ Each case group has a default HTML skeleton named `template.hbs`, and also a def

`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.

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
parent directories, meaning that page files have to be directly in the `test.ts` directory.

```
suites/
|---- breadcrumbs/
Expand All @@ -23,6 +26,7 @@ suites/
|---- init.js [optional case specific init]
|---- subject.js [optional case specific subject]
|---- test.ts [assertions]
|---- page-*.html [optional, NO fallback!]
```

## Writing Tests
Expand Down
16 changes: 16 additions & 0 deletions packages/integration-tests/suites/replay/multiple-pages/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as Sentry from '@sentry/browser';

window.Sentry = Sentry;
window.Replay = new Sentry.Replay({
flushMinDelay: 500,
flushMaxDelay: 500,
});

Sentry.init({
dsn: 'https://[email protected]/1337',
sampleRate: 0,
replaysSessionSampleRate: 1.0,
replaysOnErrorSampleRate: 0,

integrations: [window.Replay],
});
13 changes: 13 additions & 0 deletions packages/integration-tests/suites/replay/multiple-pages/page-0.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>Secondary Page</h1>
<button id="go-background">New Tab</button>
<button id="spa-navigation">Mimic a SPA navigation</button>
<!-- Template.html becomes index.html during test execution-->
<a href="./index.html">Go Back to first page</a>
</body>
</html>
10 changes: 10 additions & 0 deletions packages/integration-tests/suites/replay/multiple-pages/subject.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
document.getElementById('go-background').addEventListener('click', () => {
Object.defineProperty(document, 'hidden', { value: true, writable: true });
const ev = document.createEvent('Event');
ev.initEvent('visibilitychange');
document.dispatchEvent(ev);
});

document.getElementById('spa-navigation').addEventListener('click', () => {
window.history.pushState({}, '', '/spa');
});
10 changes: 10 additions & 0 deletions packages/integration-tests/suites/replay/multiple-pages/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button id="go-background">New Tab</button>
<a href="./page-0.html">Go To new page</a>
</body>
</html>
Loading