Identify an iframe and then shadow elements under it

I see the iframe gets inserted into DOM after I click on an icon. So DOM gets updated. Once I am able to get this iframe, I need to operate on some elements within it. There are also some shadow host elements within this iframe.

I tried following:
Attempt1:
const iframe = page.waitForSelector("#iframeId")
Attempt2:

const iFrameHandle = page.waitForSelector("#parentelement")
const iframe = iFrameHandle.contentFrame()

Attempt3:

page.mainFrame(), page.frames()

Last resort:

const iframeHandle = await page.waitForSelector(“#iframeId”, { state: ‘attached’, timeout: 10000 });
const iframe = await iframeHandle.contentFrame();
console.log("IFRAME: "+iframe);
console.log(“Iframe handle stringify:”, JSON.stringify(iframeHandle, null, 2));

Is there anything I need to add to the code after I click on the icon which loads the iframe and before I try to locate elements within the iframe ?
Is there any equivalent in k6 for switch to iframe in Selenium ?

This worked:

 await page.waitForSelector("#iframeId", { visible: true, timeout: 30000 });

// Get the iframe element
const iframeElement = await page.$("#iframeId");
if (!iframeElement) {
    throw new Error('Iframe not found');
}

// Get the content frame of the iframe
const frame = await iframeElement.contentFrame();
if (!frame) {
    throw new Error('Iframe content not accessible');
}