xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: canvas data in iframe wasn't applied in the fast-forward mode (#944)

Browse Source 
* fix: canvas data in iframe wasn't applied in the fastforward mode

* add more comments

* Update packages/rrdom/src/diff.ts

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

* apply Juice10's suggestion

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
This commit is contained in:
Yun Feng
2022-07-31 09:01:04 +08:00
committed by GitHub
parent aecaefbf45
commit f1b23ddccc
5 changed files with 232 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
packages/rrweb/test/events/canvas-in-iframe.ts Normal file
View File

@@ -0,0 +1,181 @@
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: {
type: 0,
childNodes: [
{
type: 2,
tagName: 'html',
attributes: {},
childNodes: [
{
type: 2,
tagName: 'head',
attributes: {},
childNodes: [
{ type: 3, textContent: '\n ', id: 4 },
{
type: 2,
tagName: 'meta',
attributes: { charset: 'utf-8' },
childNodes: [],
id: 5,
},
{ type: 3, textContent: ' \n ', id: 6 },
],
id: 3,
},
{ type: 3, textContent: '\n ', id: 7 },
{
type: 2,
tagName: 'body',
attributes: {},
childNodes: [
{ type: 3, textContent: '\n ', id: 9 },
{
type: 2,
tagName: 'iframe',
attributes: { id: 'target' },
childNodes: [],
id: 19,
},
{ type: 3, textContent: '\n\n', id: 27 },
],
id: 8,
},
],
id: 2,
},
],
compatMode: 'BackCompat',
id: 1,
},
initialOffset: { left: 0, top: 0 },
},
timestamp: now + 200,
},
// add an iframe
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
adds: [
{
parentId: 19,
nextId: null,
node: {
type: 0,
childNodes: [
{
type: 2,
tagName: 'html',
attributes: {},
childNodes: [
{
type: 2,
tagName: 'head',
attributes: {},
childNodes: [],
rootId: 30,
id: 32,
},
{
type: 2,
tagName: 'body',
attributes: {},
childNodes: [],
rootId: 30,
id: 33,
},
],
rootId: 30,
id: 31,
},
],
compatMode: 'BackCompat',
id: 30,
},
},
],
removes: [],
texts: [],
attributes: [],
isAttachIframe: true,
},
timestamp: now + 500,
},
// add two canvas, one is blank ans the other is filled with data
{
type: EventType.IncrementalSnapshot,
data: {
source: 0,
texts: [],
attributes: [],
removes: [],
adds: [
{
parentId: 33,
nextId: null,
node: {
type: 2,
tagName: 'canvas',
attributes: {
width: '10',
height: '10',
id: 'blank_canvas',
},
childNodes: [],
rootId: 30,
id: 34,
},
},
{
parentId: 33,
nextId: null,
node: {
type: 2,
tagName: 'canvas',
attributes: {
width: '10',
height: '10',
rr_dataURL:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAB5JREFUKFNjZCASMBKpjmEQKvzPwIDqrEHoRozgBQC/ZQELU4DiXAAAAABJRU5ErkJggg==',
id: 'canvas_with_data',
},
childNodes: [],
rootId: 30,
id: 35,
},
},
],
},
timestamp: now + 500,
},
];
export default events;

26
packages/rrweb/test/replayer.test.ts
View File

@@ -15,6 +15,7 @@ import inputEvents from './events/input';
import iframeEvents from './events/iframe';
import shadowDomEvents from './events/shadow-dom';
import StyleSheetTextMutation from './events/style-sheet-text-mutation';
import canvasInIframe from './events/canvas-in-iframe';
interface ISuite {
code: string;
@@ -613,6 +614,31 @@ describe('replayer', function () {
).toEqual('shadow dom two');
});
it('can fast-forward mutation events containing painted canvas in iframe', async () => {
await page.evaluate(`
events = ${JSON.stringify(canvasInIframe)};
const { Replayer } = rrweb;
var replayer = new Replayer(events,{showDebug:true});
replayer.pause(550);
`);
const replayerIframe = await page.$('iframe');
const contentDocument = await replayerIframe!.contentFrame()!;
const iframe = await contentDocument!.$('iframe');
expect(iframe).not.toBeNull();
const docInIFrame = await iframe?.contentFrame();
expect(docInIFrame).not.toBeNull();
const canvasElements = await docInIFrame!.$$('canvas');
// The first canvas is a blank one and the second is a painted one.
expect(canvasElements.length).toEqual(2);
const dataUrls = await docInIFrame?.$$eval('canvas', (elements) =>
elements.map((element) => (element as HTMLCanvasElement).toDataURL()),
);
expect(dataUrls?.length).toEqual(2);
// The painted canvas's data should not be empty.
expect(dataUrls![1]).not.toEqual(dataUrls![0]);
});
it('can stream events in live mode', async () => {
const status = await page.evaluate(`
const { Replayer } = rrweb;