fix(snapshot): render srcdoc iframe snapshots (microsoft#21003)

yury-s · Feb 27, 2023 · e28801f · e28801f
1 parent 0cd39cf
commit e28801f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts b/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts
@@ -477,7 +477,7 @@ export function frameSnapshotStreamer(snapshotStreamer: string) {
             const name = element.attributes[i].name;
             if (nodeName === 'LINK' && name === 'integrity')
               continue;
-            if (nodeName === 'IFRAME' && (name === 'src' || name === 'sandbox'))
+            if (nodeName === 'IFRAME' && (name === 'src' || name === 'srcdoc' || name === 'sandbox'))
               continue;
             if (nodeName === 'FRAME' && name === 'src')
               continue;

diff --git a/tests/library/snapshotter.spec.ts b/tests/library/snapshotter.spec.ts
@@ -130,9 +130,7 @@ it.describe('snapshots', () => {
     expect((await snapshotter.resourceContentForTest(resource.response.content._sha1)).toString()).toBe('button { color: blue; }');
   });
 
-  it('should capture frame', async ({ page, server, toImpl, browserName, snapshotter }) => {
-    it.skip(browserName === 'firefox');
-
+  it('should capture frame', async ({ page, server, toImpl, snapshotter }) => {
     await page.route('**/empty.html', route => {
       route.fulfill({
         body: '<frameset><frame src="frame.html"></frameset>',
@@ -156,9 +154,7 @@ it.describe('snapshots', () => {
     }
   });
 
-  it('should capture iframe', async ({ page, server, toImpl, browserName, snapshotter }) => {
-    it.skip(browserName === 'firefox');
-
+  it('should capture iframe', async ({ page, server, toImpl, snapshotter }) => {
     await page.route('**/empty.html', route => {
       route.fulfill({
         body: '<iframe src="iframe.html"></iframe>',
@@ -183,6 +179,26 @@ it.describe('snapshots', () => {
     }
   });
 
+
+  it('should capture iframe with srcdoc', async ({ page, server, toImpl, snapshotter }) => {
+    await page.route('**/empty.html', route => {
+      route.fulfill({
+        body: '<iframe srcdoc="&lt;html>&lt;button>Hello iframe&lt;/button>&lt;/html>"></iframe>',
+        contentType: 'text/html'
+      }).catch(() => {});
+    });
+    await page.goto(server.EMPTY_PAGE);
+
+    // Marking iframe hierarchy is racy, do not expect snapshot, wait for it.
+    for (let counter = 0; ; ++counter) {
+      const snapshot = await snapshotter.captureSnapshot(toImpl(page), 'snapshot' + counter);
+      const text = distillSnapshot(snapshot).replace(/frame@[^"]+["]/, '<id>"');
+      if (text === '<IFRAME __playwright_src__=\"/snapshot/<id>\"></IFRAME>')
+        break;
+      await page.waitForTimeout(250);
+    }
+  });
+
   it('should capture snapshot target', async ({ page, toImpl, snapshotter }) => {
     await page.setContent('<button>Hello</button><button>World</button>');
     {