From e28801f6eff7f3ad5086755933521efd5b54e95b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tarnay=20K=C3=A1lm=C3=A1n?= <kalmi@users.noreply.github.com>
Date: Mon, 27 Feb 2023 22:34:39 +0100
Subject: [PATCH] fix(snapshot): render srcdoc iframe snapshots (#21003)

---
 .../trace/recorder/snapshotterInjected.ts     |  2 +-
 tests/library/snapshotter.spec.ts             | 28 +++++++++++++++----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts b/packages/playwright-core/src/server/trace/recorder/snapshotterInjected.ts
index d7dce7aade..be6dea15a6 100644
--- 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
index f2be864c4e..7a0a0ca8f2 100644
--- 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>');
     {