Button click within an Iframe nested in another Iframe

Grafana k6 k6-browser
7

@inancgumus

In my case these were the HTMLs

index.html:

<body>
  <iframe id="myIframe" name="myIframe" src="iframe.html"></iframe>
  <button id="myButton" onclick="console.log('myButton pressed')">Button outside</button>
</body>

iframe.html:

<body>
  <iframe id="SomeID" name="subIframe" src="iframe1.html"></iframe>
  <button id="iframeButton" onclick="console.log('iframeButton pressed')" text="IframeButton">Iframe button</button>
</body>

iframe1.html:

<body>
  <button id="confirmButton" name="iframe1Button" onclick="console.log('Confirm button Pressed')" text="Confirm">Confirm</button>
</body>

test script:

export default async function () {
  const page = browser.newPage();
    
    try {
      await page.goto('http://localhost:9080');
      const iframeHandle = page.waitForSelector('//iframe');
      const frame = iframeHandle.contentFrame();
      const button1 = frame.waitForSelector('button[text="IframeButton"]');
      await button1.click();  // this works perfectly

      const confirmFrameHandle = frame.waitForSelector('iframe[id*="SomeID"]');
      const confirmFrame = confirmFrameHandle.contentFrame();
      const button2 = confirmFrame.waitForSelector('button[text="Confirm"]');
      await button2.click(); // panicked
      //confirmFrame.evaluate(() => {document.getElementById('confirmButton').click(); });
    } finally {
        page.close();
    }
}
1 Like