test: run recorder on a custom window html element

rrweb-io · Oct 15, 2022 · 6cf7933 · 6cf7933
1 parent 700efda
commit 6cf7933
Show file tree

Hide file tree

Showing 3 changed files with 254 additions and 1 deletion.
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
@@ -263,7 +263,7 @@ export type recordOptions<T> = {
   userTriggeredOnInput?: boolean;
   collectFonts?: boolean;
   inlineImages?: boolean;
-  window?: IWindow;
+  window?: Window;
   plugins?: RecordPlugin[];
   // departed, please use sampling options
   mousemoveWait?: number;

diff --git a/packages/rrweb/test/__snapshots__/record.test.ts.snap b/packages/rrweb/test/__snapshots__/record.test.ts.snap
@@ -1,5 +1,172 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`be loaded from an iframe captures activity in outer frame 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 3
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 5
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"input\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"text\\",
+                      \\"size\\": \\"40\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"iframe\\",
+                    \\"attributes\\": {
+                      \\"srcdoc\\": \\"<div>rrweb loaded in here!</div>\\"
+                    },
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n        </body>\\\\n      </html>\\\\n    \\",
+                        \\"id\\": 9
+                      }
+                    ],
+                    \\"id\\": 8
+                  }
+                ],
+                \\"id\\": 4
+              }
+            ],
+            \\"id\\": 2
+          }
+        ],
+        \\"compatMode\\": \\"BackCompat\\",
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 8,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 10,
+                    \\"id\\": 12
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"body\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"div\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"rrweb loaded in here!\\",
+                            \\"rootId\\": 10,
+                            \\"id\\": 15
+                          }
+                        ],
+                        \\"rootId\\": 10,
+                        \\"id\\": 14
+                      }
+                    ],
+                    \\"rootId\\": 10,
+                    \\"id\\": 13
+                  }
+                ],
+                \\"rootId\\": 10,
+                \\"id\\": 11
+              }
+            ],
+            \\"id\\": 10
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 6
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"a\\",
+      \\"isChecked\\": false,
+      \\"id\\": 6
+    }
+  }
+]"
+`;
+
 exports[`record can add custom event 1`] = `
 "[
   {

diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts
@@ -69,6 +69,45 @@ const setup = function (this: ISuite, content: string): ISuite {
   return ctx;
 };
 
+const iframeSetup = function (this: ISuite, content: string): ISuite {
+  const ctx = {} as ISuite;
+
+  beforeAll(async () => {
+    ctx.browser = await launchPuppeteer({
+      devtools: true,
+    });
+
+    const bundlePath = path.resolve(__dirname, '../dist/rrweb.js');
+    ctx.code = fs.readFileSync(bundlePath, 'utf8');
+  });
+
+  beforeEach(async () => {
+    ctx.page = await ctx.browser.newPage();
+    await ctx.page.goto('about:blank?outer');
+    await ctx.page.setContent(content);
+    await ctx.page.frames()[1].evaluate(ctx.code);
+    ctx.events = [];
+    await ctx.page.exposeFunction('emit', (e: eventWithTime) => {
+      if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) {
+        return;
+      }
+      ctx.events.push(e);
+    });
+
+    ctx.page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
+  });
+
+  afterEach(async () => {
+    await ctx.page.close();
+  });
+
+  afterAll(async () => {
+    await ctx.browser.close();
+  });
+
+  return ctx;
+};
+
 describe('record', function (this: ISuite) {
   jest.setTimeout(10_000);
 
@@ -861,3 +900,50 @@ describe('record iframes', function (this: ISuite) {
     assertSnapshot(ctx.events);
   });
 });
+
+describe('be loaded from an iframe', function (this: ISuite) {
+  jest.setTimeout(10_000);
+
+  const ctx: ISuite = iframeSetup.call(
+    this,
+    `
+      <html>
+        <body>
+          <input type="text" size="40" />
+          <iframe srcdoc="<div>rrweb loaded in here!</div>" />
+        </body>
+      </html>
+    `,
+  );
+
+  it('captures activity in outer frame', async () => {
+    await ctx.page.frames()[1].evaluate(() => {
+      // window here is the iframe window
+      const { record } = ((window as unknown) as IWindow).rrweb;
+      record({
+        emit: ((window as unknown) as IWindow).emit,
+        window: window.top as IWindow,
+      });
+    });
+
+    expect(await ctx.page.evaluate('typeof rrweb')).toEqual('undefined');
+    await ctx.page.type('input', 'a');  // ensuring that typing in outer gets recorded by inner rrweb
+
+    expect(ctx.events.length).toEqual(5);
+
+    expect(
+      ctx.events.filter(
+        (event: eventWithTime) => event.type === EventType.Meta,
+      ).length,
+    ).toEqual(1);
+
+    expect(
+      ctx.events.filter(
+        (event: eventWithTime) => event.type === EventType.FullSnapshot,
+      ).length,
+    ).toEqual(1);
+
+    await waitForRAF(ctx.page); // wait till events get sent
+    assertSnapshot(ctx.events);
+  });
+});