fix: make sure inner OOPIFs can be attached to (#8304)

src/common/FrameManager.ts

@@ -136,6 +136,13 @@ export class FrameManager extends EventEmitter {
       const result = await Promise.all([
         client.send('Page.enable'),
         client.send('Page.getFrameTree'),
+        client !== this._client
+          ? client.send('Target.setAutoAttach', {
+              autoAttach: true,
+              waitForDebuggerOnStart: false,
+              flatten: true,
+            })
+          : Promise.resolve(),
       ]);
 
       const { frameTree } = result[1];

test/assets/inner-frame1.html

@@ -0,0 +1,10 @@
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const iframe = document.createElement('iframe');
+    const url = new URL(location.href);
+    url.hostname = 'inner-frame2.test';
+    url.pathname = '/inner-frame2.html';
+    iframe.src = url.toString();
+    document.body.appendChild(iframe);
+  }, false);
+</script>

test/assets/inner-frame2.html

@@ -0,0 +1 @@
+<button>click</button>

test/assets/main-frame.html

@@ -0,0 +1,10 @@
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const iframe = document.createElement('iframe');
+    const url = new URL(location.href);
+    url.hostname = 'inner-frame1.test';
+    url.pathname = '/inner-frame1.html';
+    iframe.src = url.toString();
+    document.body.appendChild(iframe);
+  }, false);
+</script>

test/oopif.spec.ts

@@ -31,6 +31,7 @@ describeChromeOnly('OOPIF', function () {
         args: (defaultBrowserOptions.args || []).concat([
           '--site-per-process',
           '--remote-debugging-port=21222',
+          '--host-rules=MAP * 127.0.0.1',
         ]),
       })
     );
@@ -263,6 +264,20 @@ describeChromeOnly('OOPIF', function () {
     expect(oopifs(context).length).toBe(1);
     expect(page.frames().length).toBe(2);
   });
+
+  it('should wait for inner OOPIFs', async () => {
+    const { server } = getTestState();
+    await page.goto(`http://mainframe:${server.PORT}/main-frame.html`);
+    const frame2 = await page.waitForFrame((frame) =>
+      frame.url().endsWith('inner-frame2.html')
+    );
+    expect(oopifs(context).length).toBe(2);
+    expect(page.frames().filter((frame) => frame.isOOPFrame()).length).toBe(2);
+    expect(
+      await frame2.evaluate(() => document.querySelectorAll('button').length)
+    ).toStrictEqual(1);
+  });
+
   it('should load oopif iframes with subresources and request interception', async () => {
     const { server } = getTestState();