* rrdom: add a diff function for properties * implement diffChildren function and unit tests * finish basic functions of diff algorithm * fix several bugs in the diff algorithm * replace the virtual parent optimization in applyMutation() * fix: moveAndHover after the diff algorithm is executed * replace virtual style map with rrdom cssom version has to be above 0.5.0 to pass virtual style tests * fix: failed virtual style tests in replayer.test.ts * fix: failed polyfill tests caused by nodejs compatibility of different versions * fix: svg viewBox attribute doesn't work Cause the attribute viewBox is case sensitive, set value for viewbox doesn't work * feat: replace treeIndex optimization with rrdom * fix bug of diffProps and disable smooth scrolling animation in fast-forward mode * feat: add iframe support * fix: @rollup/plugin-typescript build errors in rrweb-player Error: @rollup/plugin-typescript TS1371: This import is never used as a value and must use 'import type' because the 'importsNotUsedAsValues' is set to 'error' * fix: bug when fast-forward input events and add test for it * add test for fast-forward scroll events * fix: custom style rules don't get inserted into some iframe elements * code style tweak * fix: enable to diff iframe elements * fix the jest error "Unexpected token 'export'" * try to fix build error of rrweb-player * correct the attributes definition in rrdom * fix: custom style rules are not inserted in some iframes * add support for shadow dom * add support for MediaInteraction * add canvas support * fix unit test error in rrdom * add support for Text, Comment * try to refactor RRDom * refactor RRDom to reduce duplicate code * rename document-browser to virtual-dom * increase the test coverage for document.ts and add ownerDocument for it * Merge branch 'master' into virtual-dom * add more test for virtual-dom.ts * use cssstyle in document-nodejs * fix: bundle error * improve document-nodejs * enable to diff scroll positions of an element * rename rrdom to virtualDom for more readability and make the tree public * revert unknown change * improve the css style parser for comments * improve code style * update typings * add handling for the case where legacy_missingNodeRetryMap is not empty * only import types from rrweb into rrdom * Apply suggestions from code review Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com> * Apply suggestions from code review * fix building error in rrweb * add a method setDefaultSN to set a default value for a RRNode's __sn * fix rrweb test error and bump up other packages * add support for custom property of css styles * add a switch for virtual-dom optimization * Apply suggestions from code review 1. add an enum type for NodeType 2. rename nodeType from rrweb-snapshot to RRNodeType 3. rename notSerializedId to unserializedId 4. add comments for some confusing variables * adapt changes of #865 to virtual-dom and improve the test case for more coverage * apply review suggestions https://github.com/rrweb-io/rrweb/pull/853#pullrequestreview-922474953 * tweak the diff algorithm * add description of the flag useVirtualDom and remove outdated logConfig * Remove console.log * Contain changes to document * Upgrade rollup to 2.70.2 * Revert "Upgrade rollup to 2.70.2" This reverts commit b1be81a2a76565935c9dc391f31beb7f64d25956. * Fix type checking rrdom * Fix typing error while bundling * Fix tslib error on build Rollup would output the following error: `semantic error TS2343: This syntax requires an imported helper named '__spreadArray' which does not exist in 'tslib'. Consider upgrading your version of 'tslib'.` * Increase memory limit for rollup * Use esbuild for bundling Speeds up bundling significantly * Avoid circular dependencies and import un-bundled rrdom * Fix imports * Revert back to pre-esbuild This reverts the following commits: b7b3c8dbaa551a0129da1477136b1baaad28e6e1 72e23b8e27f9030d911358d3a17fe5ad1b3b5d4f 85d600a20c56cfa764cf1f858932ba14e67b1d23 61e1a5d323212ca8fbe0569e0b3062ddd53fc612 * Set node to lts (12 is no longer supported) * Speed up bundling and use less memory This fixes the out of memory errors happening while bundling * remove __sn from rrdom * fix typo * test: add a test case for StyleSheet mutation exceptions while fast-forwarding * rename Array.prototype.slice.call() to Array.from() * improve test cases * fix: PR #887 in 'virtual-dom' branch * apply justin's suggestion on 'Array.from' refactor related commit 0f6729d27a323260b36fbe79485a86715c0bc98a * improve import code structure Co-authored-by: Yun Feng <yun.feng@anu.edu.au>
This commit is contained in:
Justin Halsall
@@ -8362,7 +8362,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"assert\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:2:37\\"
|
||||
\\"__puppeteer_evaluation_script__:2:21\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"true\\",
|
||||
@@ -8378,7 +8378,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"count\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:3:37\\"
|
||||
\\"__puppeteer_evaluation_script__:3:21\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"count\\\\\\"\\"
|
||||
@@ -8393,7 +8393,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"countReset\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:4:37\\"
|
||||
\\"__puppeteer_evaluation_script__:4:21\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"count\\\\\\"\\"
|
||||
@@ -8408,7 +8408,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"debug\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:5:37\\"
|
||||
\\"__puppeteer_evaluation_script__:5:21\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"debug\\\\\\"\\"
|
||||
@@ -8423,7 +8423,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"dir\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:6:37\\"
|
||||
\\"__puppeteer_evaluation_script__:6:21\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"dir\\\\\\"\\"
|
||||
@@ -8438,7 +8438,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"dirxml\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:7:37\\"
|
||||
\\"__puppeteer_evaluation_script__:7:21\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"dirxml\\\\\\"\\"
|
||||
@@ -8453,7 +8453,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"group\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:8:37\\"
|
||||
\\"__puppeteer_evaluation_script__:8:21\\"
|
||||
],
|
||||
\\"payload\\": []
|
||||
}
|
||||
@@ -8466,7 +8466,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"groupCollapsed\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:9:37\\"
|
||||
\\"__puppeteer_evaluation_script__:9:21\\"
|
||||
],
|
||||
\\"payload\\": []
|
||||
}
|
||||
@@ -8479,7 +8479,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"info\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:10:37\\"
|
||||
\\"__puppeteer_evaluation_script__:10:21\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"info\\\\\\"\\"
|
||||
@@ -8494,7 +8494,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"log\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:11:37\\"
|
||||
\\"__puppeteer_evaluation_script__:11:21\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"log\\\\\\"\\"
|
||||
@@ -8509,7 +8509,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"table\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:12:37\\"
|
||||
\\"__puppeteer_evaluation_script__:12:21\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"table\\\\\\"\\"
|
||||
@@ -8524,7 +8524,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"time\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:13:37\\"
|
||||
\\"__puppeteer_evaluation_script__:13:21\\"
|
||||
],
|
||||
\\"payload\\": []
|
||||
}
|
||||
@@ -8537,7 +8537,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"timeEnd\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:14:37\\"
|
||||
\\"__puppeteer_evaluation_script__:14:21\\"
|
||||
],
|
||||
\\"payload\\": []
|
||||
}
|
||||
@@ -8550,7 +8550,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"timeLog\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:15:37\\"
|
||||
\\"__puppeteer_evaluation_script__:15:21\\"
|
||||
],
|
||||
\\"payload\\": []
|
||||
}
|
||||
@@ -8563,7 +8563,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"trace\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:16:37\\"
|
||||
\\"__puppeteer_evaluation_script__:16:21\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"trace\\\\\\"\\"
|
||||
@@ -8578,7 +8578,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"warn\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:17:37\\"
|
||||
\\"__puppeteer_evaluation_script__:17:21\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"warn\\\\\\"\\"
|
||||
@@ -8593,7 +8593,7 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"clear\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:18:37\\"
|
||||
\\"__puppeteer_evaluation_script__:18:21\\"
|
||||
],
|
||||
\\"payload\\": []
|
||||
}
|
||||
@@ -8606,10 +8606,10 @@ exports[`record integration tests should record console messages 1`] = `
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"log\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:19:37\\"
|
||||
\\"__puppeteer_evaluation_script__:19:21\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"TypeError: a message\\\\\\\\n at __puppeteer_evaluation_script__:19:41\\\\\\\\nEnd of stack for Error object\\\\\\"\\"
|
||||
\\"\\\\\\"TypeError: a message\\\\\\\\n at __puppeteer_evaluation_script__:19:25\\\\\\\\nEnd of stack for Error object\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@ html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { ani
|
||||
file-cid-1
|
||||
@charset \\"utf-8\\";
|
||||
|
||||
.css-added-at-500 { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
|
||||
.css-added-at-400 { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
|
||||
|
||||
|
||||
file-cid-2
|
||||
@@ -64,7 +64,7 @@ file-cid-2
|
||||
|
||||
.css-added-at-200-overwritten-at-3000 { opacity: 1; transform: translateX(0px); }
|
||||
|
||||
.css-added-at-400-overwritten-at-3000 { border: 1px solid blue; }
|
||||
.css-added-at-500-overwritten-at-3000 { border: 1px solid blue; }
|
||||
|
||||
|
||||
file-cid-3
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as http from 'http';
|
||||
import type * as http from 'http';
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import type * as puppeteer from 'puppeteer';
|
||||
import {
|
||||
startServer,
|
||||
launchPuppeteer,
|
||||
@@ -9,12 +9,7 @@ import {
|
||||
replaceLast,
|
||||
waitForRAF,
|
||||
} from '../utils';
|
||||
import {
|
||||
recordOptions,
|
||||
eventWithTime,
|
||||
EventType,
|
||||
IncrementalSource,
|
||||
} from '../../src/types';
|
||||
import type { recordOptions, eventWithTime } from '../../src/types';
|
||||
import { toMatchImageSnapshot } from 'jest-image-snapshot';
|
||||
expect.extend({ toMatchImageSnapshot });
|
||||
|
||||
|
||||
@@ -486,6 +486,30 @@ const events: eventWithTime[] = [
|
||||
timestamp: now + 1500,
|
||||
},
|
||||
// add iframe five
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Mutation,
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [],
|
||||
adds: [
|
||||
{
|
||||
parentId: 75,
|
||||
nextId: null,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'iframe',
|
||||
attributes: { id: 'five' },
|
||||
childNodes: [],
|
||||
rootId: 62,
|
||||
id: 80,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
timestamp: now + 2000,
|
||||
},
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
@@ -550,30 +574,6 @@ const events: eventWithTime[] = [
|
||||
},
|
||||
timestamp: now + 2000,
|
||||
},
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Mutation,
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [],
|
||||
adds: [
|
||||
{
|
||||
parentId: 75,
|
||||
nextId: null,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'iframe',
|
||||
attributes: { id: 'five' },
|
||||
childNodes: [],
|
||||
rootId: 62,
|
||||
id: 80,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
timestamp: now + 2000,
|
||||
},
|
||||
// remove the html element of iframe four
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
|
||||
215
packages/rrweb/test/events/input.ts
Normal file
215
packages/rrweb/test/events/input.ts
Normal file
@@ -0,0 +1,215 @@
|
||||
import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
|
||||
|
||||
const now = Date.now();
|
||||
const events: eventWithTime[] = [
|
||||
{
|
||||
type: EventType.DomContentLoaded,
|
||||
data: {},
|
||||
timestamp: now,
|
||||
},
|
||||
{
|
||||
type: EventType.Load,
|
||||
data: {},
|
||||
timestamp: now + 100,
|
||||
},
|
||||
{
|
||||
type: EventType.Meta,
|
||||
data: {
|
||||
href: 'http://localhost',
|
||||
width: 1000,
|
||||
height: 800,
|
||||
},
|
||||
timestamp: now + 100,
|
||||
},
|
||||
// full snapshot:
|
||||
{
|
||||
data: {
|
||||
node: {
|
||||
id: 1,
|
||||
type: 0,
|
||||
childNodes: [
|
||||
{ id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
|
||||
{
|
||||
id: 3,
|
||||
type: 2,
|
||||
tagName: 'html',
|
||||
attributes: { lang: 'en' },
|
||||
childNodes: [
|
||||
{
|
||||
id: 4,
|
||||
type: 2,
|
||||
tagName: 'head',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: 2,
|
||||
tagName: 'body',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
initialOffset: { top: 0, left: 0 },
|
||||
},
|
||||
type: EventType.FullSnapshot,
|
||||
timestamp: now + 100,
|
||||
},
|
||||
// mutation that adds select elements
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Mutation,
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [],
|
||||
adds: [
|
||||
{
|
||||
parentId: 5,
|
||||
nextId: null,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'select',
|
||||
childNodes: [],
|
||||
id: 26,
|
||||
},
|
||||
},
|
||||
{
|
||||
parentId: 26,
|
||||
nextId: null,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'option',
|
||||
attributes: { value: 'valueC' },
|
||||
childNodes: [],
|
||||
id: 27,
|
||||
},
|
||||
},
|
||||
{
|
||||
parentId: 27,
|
||||
nextId: null,
|
||||
node: { type: 3, textContent: 'C', id: 28 },
|
||||
},
|
||||
{
|
||||
parentId: 26,
|
||||
nextId: 27,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'option',
|
||||
attributes: { value: 'valueB', selected: true },
|
||||
childNodes: [],
|
||||
id: 29,
|
||||
},
|
||||
},
|
||||
{
|
||||
parentId: 26,
|
||||
nextId: 29,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'option',
|
||||
attributes: { value: 'valueA' },
|
||||
childNodes: [],
|
||||
id: 30,
|
||||
},
|
||||
},
|
||||
{
|
||||
parentId: 30,
|
||||
nextId: null,
|
||||
node: { type: 3, textContent: 'A', id: 31 },
|
||||
},
|
||||
{
|
||||
parentId: 29,
|
||||
nextId: null,
|
||||
node: { type: 3, textContent: 'B', id: 32 },
|
||||
},
|
||||
],
|
||||
},
|
||||
timestamp: now + 1000,
|
||||
},
|
||||
// input event
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Input,
|
||||
text: 'valueA',
|
||||
isChecked: false,
|
||||
id: 26,
|
||||
},
|
||||
timestamp: now + 1500,
|
||||
},
|
||||
// input event
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Input,
|
||||
text: 'valueC',
|
||||
isChecked: false,
|
||||
id: 26,
|
||||
},
|
||||
timestamp: now + 2000,
|
||||
},
|
||||
// mutation that adds an input element
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Mutation,
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [],
|
||||
adds: [
|
||||
{
|
||||
parentId: 5,
|
||||
nextId: null,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'input',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
id: 33,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
timestamp: now + 2500,
|
||||
},
|
||||
// an input event
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Input,
|
||||
text: 'test input',
|
||||
isChecked: false,
|
||||
id: 33,
|
||||
},
|
||||
timestamp: now + 3000,
|
||||
},
|
||||
// remove the select element
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Mutation,
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [{ parentId: 5, id: 26 }],
|
||||
adds: [],
|
||||
},
|
||||
timestamp: now + 3500,
|
||||
},
|
||||
// remove the input element
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Mutation,
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [{ parentId: 5, id: 33 }],
|
||||
adds: [],
|
||||
},
|
||||
timestamp: now + 4000,
|
||||
},
|
||||
];
|
||||
|
||||
export default events;
|
||||
128
packages/rrweb/test/events/scroll.ts
Normal file
128
packages/rrweb/test/events/scroll.ts
Normal file
@@ -0,0 +1,128 @@
|
||||
import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
|
||||
|
||||
const now = Date.now();
|
||||
const events: eventWithTime[] = [
|
||||
{
|
||||
type: EventType.DomContentLoaded,
|
||||
data: {},
|
||||
timestamp: now,
|
||||
},
|
||||
{
|
||||
type: EventType.Load,
|
||||
data: {},
|
||||
timestamp: now + 100,
|
||||
},
|
||||
{
|
||||
type: EventType.Meta,
|
||||
data: {
|
||||
href: 'http://localhost',
|
||||
width: 1200,
|
||||
height: 500,
|
||||
},
|
||||
timestamp: now + 100,
|
||||
},
|
||||
// full snapshot:
|
||||
{
|
||||
data: {
|
||||
node: {
|
||||
id: 1,
|
||||
type: 0,
|
||||
childNodes: [
|
||||
{ id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
|
||||
{
|
||||
id: 3,
|
||||
type: 2,
|
||||
tagName: 'html',
|
||||
attributes: { lang: 'en' },
|
||||
childNodes: [
|
||||
{
|
||||
id: 4,
|
||||
type: 2,
|
||||
tagName: 'head',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: 2,
|
||||
tagName: 'body',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
initialOffset: { top: 0, left: 0 },
|
||||
},
|
||||
type: EventType.FullSnapshot,
|
||||
timestamp: now + 100,
|
||||
},
|
||||
// mutation that adds two div elements
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Mutation,
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [],
|
||||
adds: [
|
||||
{
|
||||
parentId: 5,
|
||||
nextId: null,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'div',
|
||||
attributes: {
|
||||
id: 'container',
|
||||
style: 'height: 1000px; overflow: scroll;',
|
||||
},
|
||||
childNodes: [],
|
||||
id: 6,
|
||||
},
|
||||
},
|
||||
{
|
||||
parentId: 6,
|
||||
nextId: null,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'div',
|
||||
attributes: {
|
||||
id: 'block',
|
||||
style: 'height: 10000px; background-color: yellow;',
|
||||
},
|
||||
childNodes: [],
|
||||
id: 7,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
timestamp: now + 500,
|
||||
},
|
||||
// scroll event on the "#container" div
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: { source: IncrementalSource.Scroll, id: 6, x: 0, y: 2500 },
|
||||
timestamp: now + 1000,
|
||||
},
|
||||
// scroll event on document
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: { source: IncrementalSource.Scroll, id: 1, x: 0, y: 250 },
|
||||
timestamp: now + 1500,
|
||||
},
|
||||
// remove the "#container" div
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Mutation,
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [{ parentId: 5, id: 6 }],
|
||||
adds: [],
|
||||
},
|
||||
timestamp: now + 2000,
|
||||
},
|
||||
];
|
||||
|
||||
export default events;
|
||||
172
packages/rrweb/test/events/shadow-dom.ts
Normal file
172
packages/rrweb/test/events/shadow-dom.ts
Normal file
@@ -0,0 +1,172 @@
|
||||
import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
|
||||
|
||||
const now = Date.now();
|
||||
|
||||
const events: eventWithTime[] = [
|
||||
{
|
||||
type: EventType.DomContentLoaded,
|
||||
data: {},
|
||||
timestamp: now,
|
||||
},
|
||||
{
|
||||
type: EventType.Load,
|
||||
data: {},
|
||||
timestamp: now + 100,
|
||||
},
|
||||
{
|
||||
type: EventType.Meta,
|
||||
data: {
|
||||
href: 'http://localhost',
|
||||
width: 1200,
|
||||
height: 500,
|
||||
},
|
||||
timestamp: now + 100,
|
||||
},
|
||||
{
|
||||
type: EventType.FullSnapshot,
|
||||
data: {
|
||||
node: {
|
||||
id: 1,
|
||||
type: 0,
|
||||
childNodes: [
|
||||
{ id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
|
||||
{
|
||||
id: 3,
|
||||
type: 2,
|
||||
tagName: 'html',
|
||||
attributes: { lang: 'en' },
|
||||
childNodes: [
|
||||
{
|
||||
id: 4,
|
||||
type: 2,
|
||||
tagName: 'head',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: 2,
|
||||
tagName: 'body',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
initialOffset: { top: 0, left: 0 },
|
||||
},
|
||||
timestamp: now + 200,
|
||||
},
|
||||
// add shadow dom elements
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Mutation,
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [],
|
||||
adds: [
|
||||
{
|
||||
parentId: 5,
|
||||
nextId: null,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'div',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
id: 6,
|
||||
isShadowHost: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
timestamp: now + 500,
|
||||
},
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Mutation,
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [],
|
||||
adds: [
|
||||
{
|
||||
parentId: 6,
|
||||
nextId: null,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'span',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
id: 7,
|
||||
isShadow: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
parentId: 7,
|
||||
nextId: null,
|
||||
node: { type: 3, textContent: 'shadow dom one', id: 8 },
|
||||
},
|
||||
],
|
||||
},
|
||||
timestamp: now + 500,
|
||||
},
|
||||
// add nested shadow dom elements
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Mutation,
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [],
|
||||
adds: [
|
||||
{
|
||||
parentId: 6,
|
||||
nextId: null,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'div',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
id: 9,
|
||||
isShadow: true,
|
||||
isShadowHost: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
timestamp: now + 1000,
|
||||
},
|
||||
{
|
||||
type: EventType.IncrementalSnapshot,
|
||||
data: {
|
||||
source: IncrementalSource.Mutation,
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [],
|
||||
adds: [
|
||||
{
|
||||
parentId: 9,
|
||||
nextId: null,
|
||||
node: {
|
||||
type: 2,
|
||||
tagName: 'span',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
id: 10,
|
||||
isShadow: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
parentId: 10,
|
||||
nextId: null,
|
||||
node: { type: 3, textContent: 'shadow dom two', id: 11 },
|
||||
},
|
||||
],
|
||||
},
|
||||
timestamp: now + 1000,
|
||||
},
|
||||
];
|
||||
|
||||
export default events;
|
||||
@@ -105,22 +105,6 @@ const events: eventWithTime[] = [
|
||||
type: EventType.FullSnapshot,
|
||||
timestamp: now + 100,
|
||||
},
|
||||
// mutation that adds style rule to existing stylesheet
|
||||
{
|
||||
data: {
|
||||
id: 101,
|
||||
adds: [
|
||||
{
|
||||
rule:
|
||||
'.css-added-at-400-overwritten-at-3000 {border: 1px solid blue;}',
|
||||
index: 1,
|
||||
},
|
||||
],
|
||||
source: IncrementalSource.StyleSheetRule,
|
||||
},
|
||||
type: EventType.IncrementalSnapshot,
|
||||
timestamp: now + 400,
|
||||
},
|
||||
// mutation that adds stylesheet
|
||||
{
|
||||
data: {
|
||||
@@ -142,7 +126,7 @@ const events: eventWithTime[] = [
|
||||
type: 3,
|
||||
isStyle: true,
|
||||
textContent:
|
||||
'\n.css-added-at-500 {\n padding: 1.3125rem;\n flex: none;\n width: 100%;\n}\n',
|
||||
'\n.css-added-at-400 {\n padding: 1.3125rem;\n flex: none;\n width: 100%;\n}\n',
|
||||
},
|
||||
nextId: null,
|
||||
parentId: 255,
|
||||
@@ -154,6 +138,22 @@ const events: eventWithTime[] = [
|
||||
attributes: [],
|
||||
},
|
||||
type: EventType.IncrementalSnapshot,
|
||||
timestamp: now + 400,
|
||||
},
|
||||
// mutation that adds style rule to existing stylesheet
|
||||
{
|
||||
data: {
|
||||
id: 101,
|
||||
adds: [
|
||||
{
|
||||
rule:
|
||||
'.css-added-at-500-overwritten-at-3000 {border: 1px solid blue;}',
|
||||
index: 1,
|
||||
},
|
||||
],
|
||||
source: IncrementalSource.StyleSheetRule,
|
||||
},
|
||||
type: EventType.IncrementalSnapshot,
|
||||
timestamp: now + 500,
|
||||
},
|
||||
// adds StyleSheetRule
|
||||
|
||||
178
packages/rrweb/test/events/style-sheet-text-mutation.ts
Normal file
178
packages/rrweb/test/events/style-sheet-text-mutation.ts
Normal file
@@ -0,0 +1,178 @@
|
||||
import { EventType, eventWithTime, IncrementalSource } from '../../src/types';
|
||||
|
||||
const now = Date.now();
|
||||
const events: eventWithTime[] = [
|
||||
{
|
||||
type: EventType.DomContentLoaded,
|
||||
data: {},
|
||||
timestamp: now,
|
||||
},
|
||||
{
|
||||
type: EventType.Load,
|
||||
data: {},
|
||||
timestamp: now + 100,
|
||||
},
|
||||
{
|
||||
type: EventType.Meta,
|
||||
data: {
|
||||
href: 'http://localhost',
|
||||
width: 1000,
|
||||
height: 800,
|
||||
},
|
||||
timestamp: now + 100,
|
||||
},
|
||||
// full snapshot
|
||||
{
|
||||
data: {
|
||||
node: {
|
||||
id: 1,
|
||||
type: 0,
|
||||
childNodes: [
|
||||
{ id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
|
||||
{
|
||||
id: 3,
|
||||
type: 2,
|
||||
tagName: 'html',
|
||||
attributes: { lang: 'en' },
|
||||
childNodes: [
|
||||
{
|
||||
id: 4,
|
||||
type: 2,
|
||||
tagName: 'head',
|
||||
attributes: {},
|
||||
childNodes: [
|
||||
{
|
||||
id: 101,
|
||||
type: 2,
|
||||
tagName: 'style',
|
||||
attributes: {},
|
||||
childNodes: [
|
||||
{
|
||||
id: 102,
|
||||
type: 3,
|
||||
isStyle: true,
|
||||
textContent: '\n.css-added-at-100 {color: yellow;}\n',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 107,
|
||||
type: 2,
|
||||
tagName: 'body',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
initialOffset: { top: 0, left: 0 },
|
||||
},
|
||||
type: EventType.FullSnapshot,
|
||||
timestamp: now + 100,
|
||||
},
|
||||
// mutation that adds an element
|
||||
{
|
||||
data: {
|
||||
adds: [
|
||||
{
|
||||
node: {
|
||||
id: 108,
|
||||
type: 2,
|
||||
tagName: 'div',
|
||||
attributes: {},
|
||||
childNodes: [],
|
||||
},
|
||||
nextId: null,
|
||||
parentId: 107,
|
||||
},
|
||||
],
|
||||
texts: [],
|
||||
source: IncrementalSource.Mutation,
|
||||
removes: [],
|
||||
attributes: [],
|
||||
},
|
||||
type: EventType.IncrementalSnapshot,
|
||||
timestamp: now + 500,
|
||||
},
|
||||
// adds a StyleSheetRule by inserting
|
||||
{
|
||||
data: {
|
||||
id: 101,
|
||||
adds: [
|
||||
{
|
||||
rule: '.css-added-at-1000-overwritten-at-1500 {color:red;}',
|
||||
},
|
||||
],
|
||||
source: IncrementalSource.StyleSheetRule,
|
||||
},
|
||||
type: EventType.IncrementalSnapshot,
|
||||
timestamp: now + 1000,
|
||||
},
|
||||
// adds a StyleSheetRule by adding a text
|
||||
{
|
||||
data: {
|
||||
adds: [
|
||||
{
|
||||
node: {
|
||||
type: 3,
|
||||
textContent: '.css-added-at-1500-deleted-at-2500 {color: yellow;}',
|
||||
id: 109,
|
||||
},
|
||||
nextId: null,
|
||||
parentId: 101,
|
||||
},
|
||||
],
|
||||
texts: [],
|
||||
source: IncrementalSource.Mutation,
|
||||
removes: [],
|
||||
attributes: [],
|
||||
},
|
||||
type: EventType.IncrementalSnapshot,
|
||||
timestamp: now + 1500,
|
||||
},
|
||||
// adds a StyleSheetRule by inserting
|
||||
{
|
||||
data: {
|
||||
id: 101,
|
||||
adds: [
|
||||
{
|
||||
rule: '.css-added-at-2000-overwritten-at-2500 {color: blue;}',
|
||||
},
|
||||
],
|
||||
source: IncrementalSource.StyleSheetRule,
|
||||
},
|
||||
type: EventType.IncrementalSnapshot,
|
||||
timestamp: now + 2000,
|
||||
},
|
||||
// deletes a StyleSheetRule by removing the text
|
||||
{
|
||||
data: {
|
||||
texts: [],
|
||||
attributes: [],
|
||||
removes: [{ parentId: 101, id: 109 }],
|
||||
adds: [],
|
||||
source: IncrementalSource.Mutation,
|
||||
},
|
||||
type: EventType.IncrementalSnapshot,
|
||||
timestamp: now + 2500,
|
||||
},
|
||||
// adds a StyleSheetRule by inserting
|
||||
{
|
||||
data: {
|
||||
id: 101,
|
||||
adds: [
|
||||
{
|
||||
rule: '.css-added-at-3000 {color: red;}',
|
||||
},
|
||||
],
|
||||
source: IncrementalSource.StyleSheetRule,
|
||||
},
|
||||
type: EventType.IncrementalSnapshot,
|
||||
timestamp: now + 3000,
|
||||
},
|
||||
];
|
||||
|
||||
export default events;
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as http from 'http';
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import type * as http from 'http';
|
||||
import type * as puppeteer from 'puppeteer';
|
||||
import {
|
||||
assertSnapshot,
|
||||
startServer,
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import type * as puppeteer from 'puppeteer';
|
||||
import {
|
||||
recordOptions,
|
||||
listenerHandler,
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import type * as puppeteer from 'puppeteer';
|
||||
import {
|
||||
recordOptions,
|
||||
listenerHandler,
|
||||
@@ -17,7 +17,7 @@ import {
|
||||
stripBase64,
|
||||
waitForRAF,
|
||||
} from '../utils';
|
||||
import { ICanvas } from 'rrweb-snapshot';
|
||||
import type { ICanvas } from 'rrweb-snapshot';
|
||||
|
||||
interface ISuite {
|
||||
code: string;
|
||||
|
||||
@@ -5,7 +5,6 @@ import { polyfillWebGLGlobals } from '../utils';
|
||||
polyfillWebGLGlobals();
|
||||
|
||||
import { Replayer } from '../../src/replay';
|
||||
import {} from '../../src/types';
|
||||
import {
|
||||
CanvasContext,
|
||||
CanvasArg,
|
||||
|
||||
@@ -1,165 +0,0 @@
|
||||
import { JSDOM } from 'jsdom';
|
||||
import {
|
||||
applyVirtualStyleRulesToNode,
|
||||
StyleRuleType,
|
||||
VirtualStyleRules,
|
||||
} from '../../src/replay/virtual-styles';
|
||||
|
||||
describe('virtual styles', () => {
|
||||
describe('applyVirtualStyleRulesToNode', () => {
|
||||
it('should insert rule at index 0 in empty sheet', () => {
|
||||
const dom = new JSDOM(`
|
||||
<style></style>
|
||||
`);
|
||||
const styleEl = dom.window.document.getElementsByTagName('style')[0];
|
||||
|
||||
const cssText = '.added-rule {border: 1px solid yellow;}';
|
||||
|
||||
const virtualStyleRules: VirtualStyleRules = [
|
||||
{ cssText, index: 0, type: StyleRuleType.Insert },
|
||||
];
|
||||
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
|
||||
|
||||
expect(styleEl.sheet?.cssRules?.length).toEqual(1);
|
||||
expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
|
||||
});
|
||||
|
||||
it('should insert rule at index 0 and keep exsisting rules', () => {
|
||||
const dom = new JSDOM(`
|
||||
<style>
|
||||
a {color: blue}
|
||||
div {color: black}
|
||||
</style>
|
||||
`);
|
||||
const styleEl = dom.window.document.getElementsByTagName('style')[0];
|
||||
|
||||
const cssText = '.added-rule {border: 1px solid yellow;}';
|
||||
const virtualStyleRules: VirtualStyleRules = [
|
||||
{ cssText, index: 0, type: StyleRuleType.Insert },
|
||||
];
|
||||
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
|
||||
|
||||
expect(styleEl.sheet?.cssRules?.length).toEqual(3);
|
||||
expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
|
||||
});
|
||||
|
||||
it('should delete rule at index 0', () => {
|
||||
const dom = new JSDOM(`
|
||||
<style>
|
||||
a {color: blue;}
|
||||
div {color: black;}
|
||||
</style>
|
||||
`);
|
||||
const styleEl = dom.window.document.getElementsByTagName('style')[0];
|
||||
|
||||
const virtualStyleRules: VirtualStyleRules = [
|
||||
{ index: 0, type: StyleRuleType.Remove },
|
||||
];
|
||||
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
|
||||
|
||||
expect(styleEl.sheet?.cssRules?.length).toEqual(1);
|
||||
expect(styleEl.sheet?.cssRules[0].cssText).toEqual('div {color: black;}');
|
||||
});
|
||||
|
||||
it('should restore a snapshot by inserting missing rules', () => {
|
||||
const dom = new JSDOM(`
|
||||
<style>
|
||||
a {color: blue;}
|
||||
.deleted-rule {color: pink;}
|
||||
div {color: black;}
|
||||
</style>
|
||||
`);
|
||||
const styleEl = dom.window.document.getElementsByTagName('style')[0];
|
||||
|
||||
const virtualStyleRules: VirtualStyleRules = [
|
||||
{
|
||||
cssTexts: ['a {color: blue;}', 'div {color: black;}'],
|
||||
type: StyleRuleType.Snapshot,
|
||||
},
|
||||
];
|
||||
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
|
||||
|
||||
expect(styleEl.sheet?.cssRules?.length).toEqual(2);
|
||||
});
|
||||
|
||||
it('should restore a snapshot by fixing order of rules', () => {
|
||||
const dom = new JSDOM(`
|
||||
<style>
|
||||
div {color: black;}
|
||||
a {color: blue;}
|
||||
</style>
|
||||
`);
|
||||
const styleEl = dom.window.document.getElementsByTagName('style')[0];
|
||||
|
||||
const cssTexts = ['a {color: blue;}', 'div {color: black;}'];
|
||||
|
||||
const virtualStyleRules: VirtualStyleRules = [
|
||||
{
|
||||
cssTexts,
|
||||
type: StyleRuleType.Snapshot,
|
||||
},
|
||||
];
|
||||
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
|
||||
|
||||
expect(styleEl.sheet?.cssRules?.length).toEqual(2);
|
||||
expect(
|
||||
Array.from(styleEl.sheet?.cssRules || []).map((rule) => rule.cssText),
|
||||
).toEqual(cssTexts);
|
||||
});
|
||||
|
||||
// JSDOM/CSSOM is currently broken for this test
|
||||
// remove '.skip' once https://github.com/NV/CSSOM/pull/113#issue-712485075 is merged
|
||||
it.skip('should insert rule at index [0,0] and keep exsisting rules', () => {
|
||||
const dom = new JSDOM(`
|
||||
<style>
|
||||
@media {
|
||||
a {color: blue}
|
||||
div {color: black}
|
||||
}
|
||||
</style>
|
||||
`);
|
||||
const styleEl = dom.window.document.getElementsByTagName('style')[0];
|
||||
|
||||
const cssText = '.added-rule {border: 1px solid yellow;}';
|
||||
const virtualStyleRules: VirtualStyleRules = [
|
||||
{ cssText, index: [0, 0], type: StyleRuleType.Insert },
|
||||
];
|
||||
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
|
||||
|
||||
console.log(
|
||||
Array.from((styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules),
|
||||
);
|
||||
|
||||
expect(
|
||||
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
|
||||
).toEqual(3);
|
||||
expect(
|
||||
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
|
||||
).toEqual(cssText);
|
||||
});
|
||||
|
||||
it('should delete rule at index [0,1]', () => {
|
||||
const dom = new JSDOM(`
|
||||
<style>
|
||||
@media {
|
||||
a {color: blue;}
|
||||
div {color: black;}
|
||||
}
|
||||
</style>
|
||||
`);
|
||||
const styleEl = dom.window.document.getElementsByTagName('style')[0];
|
||||
|
||||
const virtualStyleRules: VirtualStyleRules = [
|
||||
{ index: [0, 1], type: StyleRuleType.Remove },
|
||||
];
|
||||
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
|
||||
|
||||
expect(
|
||||
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
|
||||
).toEqual(1);
|
||||
expect(
|
||||
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
|
||||
).toEqual('a {color: blue;}');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,8 +1,8 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import { assertDomSnapshot, launchPuppeteer } from '../utils';
|
||||
import { launchPuppeteer } from '../utils';
|
||||
import { toMatchImageSnapshot } from 'jest-image-snapshot';
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import type * as puppeteer from 'puppeteer';
|
||||
import events from '../events/webgl';
|
||||
|
||||
interface ISuite {
|
||||
|
||||
@@ -2,16 +2,21 @@
|
||||
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import type * as puppeteer from 'puppeteer';
|
||||
import {
|
||||
assertDomSnapshot,
|
||||
launchPuppeteer,
|
||||
sampleEvents as events,
|
||||
sampleStyleSheetRemoveEvents as stylesheetRemoveEvents,
|
||||
waitForRAF,
|
||||
} from './utils';
|
||||
import styleSheetRuleEvents from './events/style-sheet-rule-events';
|
||||
import orderingEvents from './events/ordering';
|
||||
import scrollEvents from './events/scroll';
|
||||
import inputEvents from './events/input';
|
||||
import iframeEvents from './events/iframe';
|
||||
import shadowDomEvents from './events/shadow-dom';
|
||||
import StyleSheetTextMutation from './events/style-sheet-text-mutation';
|
||||
|
||||
interface ISuite {
|
||||
code: string;
|
||||
@@ -247,12 +252,206 @@ describe('replayer', function () {
|
||||
const rules = [...replayer.iframe.contentDocument.styleSheets].map(
|
||||
(sheet) => [...sheet.rules],
|
||||
).flat();
|
||||
rules.some((x) => x.selectorText === '.css-added-at-3100');
|
||||
rules.some((x) => x.selectorText === '.css-added-at-3100') &&
|
||||
!rules.some(
|
||||
(x) => x.selectorText === '.css-added-at-500-overwritten-at-3000',
|
||||
);
|
||||
`);
|
||||
|
||||
expect(result).toEqual(true);
|
||||
});
|
||||
|
||||
it('should overwrite all StyleSheetRules by appending a text node to stylesheet element while fast-forwarding', async () => {
|
||||
await page.evaluate(`events = ${JSON.stringify(StyleSheetTextMutation)}`);
|
||||
const result = await page.evaluate(`
|
||||
const { Replayer } = rrweb;
|
||||
const replayer = new Replayer(events);
|
||||
replayer.pause(1600);
|
||||
const rules = [...replayer.iframe.contentDocument.styleSheets].map(
|
||||
(sheet) => [...sheet.rules],
|
||||
).flat();
|
||||
rules.some((x) => x.selectorText === '.css-added-at-1000-overwritten-at-1500');
|
||||
`);
|
||||
expect(result).toEqual(false);
|
||||
});
|
||||
|
||||
it('should apply fast-forwarded StyleSheetRules that came after appending text node to stylesheet element', async () => {
|
||||
await page.evaluate(`events = ${JSON.stringify(StyleSheetTextMutation)}`);
|
||||
const result = await page.evaluate(`
|
||||
const { Replayer } = rrweb;
|
||||
const replayer = new Replayer(events);
|
||||
replayer.pause(2100);
|
||||
const rules = [...replayer.iframe.contentDocument.styleSheets].map(
|
||||
(sheet) => [...sheet.rules],
|
||||
).flat();
|
||||
rules.some((x) => x.selectorText === '.css-added-at-2000-overwritten-at-2500');
|
||||
`);
|
||||
expect(result).toEqual(true);
|
||||
});
|
||||
|
||||
it('should overwrite all StyleSheetRules by removing text node from stylesheet element while fast-forwarding', async () => {
|
||||
await page.evaluate(`events = ${JSON.stringify(StyleSheetTextMutation)}`);
|
||||
const result = await page.evaluate(`
|
||||
const { Replayer } = rrweb;
|
||||
const replayer = new Replayer(events);
|
||||
replayer.pause(2600);
|
||||
const rules = [...replayer.iframe.contentDocument.styleSheets].map(
|
||||
(sheet) => [...sheet.rules],
|
||||
).flat();
|
||||
rules.some((x) => x.selectorText === '.css-added-at-2000-overwritten-at-2500');
|
||||
`);
|
||||
expect(result).toEqual(false);
|
||||
});
|
||||
|
||||
it('should apply fast-forwarded StyleSheetRules that came after removing text node from stylesheet element', async () => {
|
||||
await page.evaluate(`events = ${JSON.stringify(StyleSheetTextMutation)}`);
|
||||
const result = await page.evaluate(`
|
||||
const { Replayer } = rrweb;
|
||||
const replayer = new Replayer(events);
|
||||
replayer.pause(3100);
|
||||
const rules = [...replayer.iframe.contentDocument.styleSheets].map(
|
||||
(sheet) => [...sheet.rules],
|
||||
).flat();
|
||||
rules.some((x) => x.selectorText === '.css-added-at-3000');
|
||||
`);
|
||||
expect(result).toEqual(true);
|
||||
});
|
||||
|
||||
it('can fast forward scroll events', async () => {
|
||||
await page.evaluate(`
|
||||
events = ${JSON.stringify(scrollEvents)};
|
||||
const { Replayer } = rrweb;
|
||||
var replayer = new Replayer(events,{showDebug:true});
|
||||
replayer.pause(550);
|
||||
`);
|
||||
// add the "#container" element at 500
|
||||
const iframe = await page.$('iframe');
|
||||
const contentDocument = await iframe!.contentFrame()!;
|
||||
expect(await contentDocument!.$('#container')).not.toBeNull();
|
||||
expect(await contentDocument!.$('#block')).not.toBeNull();
|
||||
expect(
|
||||
await contentDocument!.$eval(
|
||||
'#container',
|
||||
(element: Element) => element.scrollTop,
|
||||
),
|
||||
).toEqual(0);
|
||||
|
||||
// restart the replayer
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await waitForRAF(page);
|
||||
|
||||
await page.evaluate('replayer.pause(1050);');
|
||||
// scroll the "#container" div' at 1000
|
||||
expect(
|
||||
await contentDocument!.$eval(
|
||||
'#container',
|
||||
(element: Element) => element.scrollTop,
|
||||
),
|
||||
).toEqual(2500);
|
||||
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(1550);');
|
||||
// scroll the document at 1500
|
||||
expect(
|
||||
await page.$eval(
|
||||
'iframe',
|
||||
(element: Element) =>
|
||||
(element as HTMLIFrameElement)!.contentWindow!.scrollY,
|
||||
),
|
||||
).toEqual(250);
|
||||
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(2050);');
|
||||
// remove the "#container" element at 2000
|
||||
expect(await contentDocument!.$('#container')).toBeNull();
|
||||
expect(await contentDocument!.$('#block')).toBeNull();
|
||||
expect(
|
||||
await page.$eval(
|
||||
'iframe',
|
||||
(element: Element) =>
|
||||
(element as HTMLIFrameElement)!.contentWindow!.scrollY,
|
||||
),
|
||||
).toEqual(0);
|
||||
});
|
||||
|
||||
it('can fast forward input events', async () => {
|
||||
await page.evaluate(`
|
||||
events = ${JSON.stringify(inputEvents)};
|
||||
const { Replayer } = rrweb;
|
||||
var replayer = new Replayer(events,{showDebug:true});
|
||||
replayer.pause(1050);
|
||||
`);
|
||||
const iframe = await page.$('iframe');
|
||||
const contentDocument = await iframe!.contentFrame()!;
|
||||
expect(await contentDocument!.$('select')).not.toBeNull();
|
||||
expect(
|
||||
await contentDocument!.$eval(
|
||||
'select',
|
||||
(element: Element) => (element as HTMLSelectElement).value,
|
||||
),
|
||||
).toEqual('valueB'); // the default value
|
||||
|
||||
// restart the replayer
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await waitForRAF(page);
|
||||
|
||||
await page.evaluate('replayer.pause(1550);');
|
||||
// the value get changed to 'valueA' at 1500
|
||||
expect(
|
||||
await contentDocument!.$eval(
|
||||
'select',
|
||||
(element: Element) => (element as HTMLSelectElement).value,
|
||||
),
|
||||
).toEqual('valueA');
|
||||
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(2050);');
|
||||
// the value get changed to 'valueC' at 2000
|
||||
expect(
|
||||
await contentDocument!.$eval(
|
||||
'select',
|
||||
(element: Element) => (element as HTMLSelectElement).value,
|
||||
),
|
||||
).toEqual('valueC');
|
||||
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(2550);');
|
||||
// add a new input element at 2500
|
||||
expect(
|
||||
await contentDocument!.$eval(
|
||||
'input',
|
||||
(element: Element) => (element as HTMLSelectElement).value,
|
||||
),
|
||||
).toEqual('');
|
||||
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(3050);');
|
||||
// set the value 'test input' for the input element at 3000
|
||||
expect(
|
||||
await contentDocument!.$eval(
|
||||
'input',
|
||||
(element: Element) => (element as HTMLSelectElement).value,
|
||||
),
|
||||
).toEqual('test input');
|
||||
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(3550);');
|
||||
// remove the select element at 3500
|
||||
expect(await contentDocument!.$('select')).toBeNull();
|
||||
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(4050);');
|
||||
// remove the input element at 4000
|
||||
expect(await contentDocument!.$('input')).toBeNull();
|
||||
});
|
||||
|
||||
it('can fast-forward mutation events containing nested iframe elements', async () => {
|
||||
await page.evaluate(`
|
||||
events = ${JSON.stringify(iframeEvents)};
|
||||
@@ -264,13 +463,12 @@ describe('replayer', function () {
|
||||
const contentDocument = await iframe!.contentFrame()!;
|
||||
expect(await contentDocument!.$('iframe')).toBeNull();
|
||||
|
||||
const delay = 50;
|
||||
// restart the replayer
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await page.waitForTimeout(delay);
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(550);'); // add 'iframe one' at 500
|
||||
expect(await contentDocument!.$('iframe')).not.toBeNull();
|
||||
const iframeOneDocument = await (await contentDocument!.$(
|
||||
let iframeOneDocument = await (await contentDocument!.$(
|
||||
'iframe',
|
||||
))!.contentFrame();
|
||||
expect(iframeOneDocument).not.toBeNull();
|
||||
@@ -286,14 +484,21 @@ describe('replayer', function () {
|
||||
|
||||
// add 'iframe two' and 'iframe three' at 1000
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await page.waitForTimeout(delay);
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(1050);');
|
||||
// check the inserted style of iframe 'one' again
|
||||
iframeOneDocument = await (await contentDocument!.$(
|
||||
'iframe',
|
||||
))!.contentFrame();
|
||||
expect((await iframeOneDocument!.$$('style')).length).toBe(1);
|
||||
|
||||
expect((await contentDocument!.$$('iframe')).length).toEqual(2);
|
||||
let iframeTwoDocument = await (
|
||||
await contentDocument!.$$('iframe')
|
||||
)[1]!.contentFrame();
|
||||
expect(iframeTwoDocument).not.toBeNull();
|
||||
expect((await iframeTwoDocument!.$$('iframe')).length).toEqual(2);
|
||||
expect((await iframeTwoDocument!.$$('style')).length).toBe(1);
|
||||
let iframeThreeDocument = await (
|
||||
await iframeTwoDocument!.$$('iframe')
|
||||
)[0]!.contentFrame();
|
||||
@@ -301,25 +506,27 @@ describe('replayer', function () {
|
||||
await iframeTwoDocument!.$$('iframe')
|
||||
)[1]!.contentFrame();
|
||||
expect(iframeThreeDocument).not.toBeNull();
|
||||
expect((await iframeThreeDocument!.$$('style')).length).toBe(1);
|
||||
expect(iframeFourDocument).not.toBeNull();
|
||||
|
||||
// add 'iframe four' at 1500
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await page.waitForTimeout(delay);
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(1550);');
|
||||
iframeTwoDocument = await (
|
||||
await contentDocument!.$$('iframe')
|
||||
)[1]!.contentFrame();
|
||||
expect((await iframeTwoDocument!.$$('style')).length).toBe(1);
|
||||
iframeFourDocument = await (
|
||||
await iframeTwoDocument!.$$('iframe')
|
||||
)[1]!.contentFrame();
|
||||
expect(await iframeFourDocument!.$('iframe')).toBeNull();
|
||||
expect(await iframeFourDocument!.$('style')).not.toBeNull();
|
||||
expect((await iframeFourDocument!.$$('style')).length).toBe(1);
|
||||
expect(await iframeFourDocument!.title()).toEqual('iframe 4');
|
||||
|
||||
// add 'iframe five' at 2000
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await page.waitForTimeout(delay);
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(2050);');
|
||||
iframeTwoDocument = await (
|
||||
await contentDocument!.$$('iframe')
|
||||
@@ -327,6 +534,7 @@ describe('replayer', function () {
|
||||
iframeFourDocument = await (
|
||||
await iframeTwoDocument!.$$('iframe')
|
||||
)[1]!.contentFrame();
|
||||
expect((await iframeFourDocument!.$$('style')).length).toBe(1);
|
||||
expect(await iframeFourDocument!.$('iframe')).not.toBeNull();
|
||||
const iframeFiveDocument = await (await iframeFourDocument!.$(
|
||||
'iframe',
|
||||
@@ -343,7 +551,7 @@ describe('replayer', function () {
|
||||
|
||||
// remove the html element of 'iframe four' at 2500
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await page.waitForTimeout(delay);
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(2550);');
|
||||
iframeTwoDocument = await (
|
||||
await contentDocument!.$$('iframe')
|
||||
@@ -362,6 +570,51 @@ describe('replayer', function () {
|
||||
).not.toBeNull();
|
||||
});
|
||||
|
||||
it('can fast-forward mutation events containing nested shadow doms', async () => {
|
||||
await page.evaluate(`
|
||||
events = ${JSON.stringify(shadowDomEvents)};
|
||||
const { Replayer } = rrweb;
|
||||
var replayer = new Replayer(events,{showDebug:true});
|
||||
replayer.pause(550);
|
||||
`);
|
||||
// add shadow dom 'one' at 500
|
||||
const iframe = await page.$('iframe');
|
||||
const contentDocument = await iframe!.contentFrame()!;
|
||||
expect(
|
||||
await contentDocument!.$eval('div', (element) => element.shadowRoot),
|
||||
).not.toBeNull();
|
||||
expect(
|
||||
await contentDocument!.evaluate(
|
||||
() =>
|
||||
document
|
||||
.querySelector('body > div')!
|
||||
.shadowRoot!.querySelector('span')!.textContent,
|
||||
),
|
||||
).toEqual('shadow dom one');
|
||||
|
||||
// add shadow dom 'two' at 1000
|
||||
await page.evaluate('replayer.play(0);');
|
||||
await waitForRAF(page);
|
||||
await page.evaluate('replayer.pause(1050);');
|
||||
expect(
|
||||
await contentDocument!.evaluate(
|
||||
() =>
|
||||
document
|
||||
.querySelector('body > div')!
|
||||
.shadowRoot!.querySelector('div')!.shadowRoot,
|
||||
),
|
||||
).not.toBeNull();
|
||||
expect(
|
||||
await contentDocument!.evaluate(
|
||||
() =>
|
||||
document
|
||||
.querySelector('body > div')!
|
||||
.shadowRoot!.querySelector('div')!
|
||||
.shadowRoot!.querySelector('span')!.textContent,
|
||||
),
|
||||
).toEqual('shadow dom two');
|
||||
});
|
||||
|
||||
it('can stream events in live mode', async () => {
|
||||
const status = await page.evaluate(`
|
||||
const { Replayer } = rrweb;
|
||||
|
||||
Reference in New Issue
Block a user