Locating elements within an iframe

Grafana k6 k6-browser
1

Is there a way to locate an element within an iframe?

I have used page.frame({ url: ‘mysourceurl’ }); within my xk6 test, but Powershell prints out

“Page.frame(frameSelector) has not been implemented yet”

3

Hey @jbx,

Unfortunately, we don’t support that feature (yet) :frowning: However, you can do something like the following:

import launcher from "k6/x/browser";

export default function () {
  const browser = launcher.launch('chromium', { headless: false })
  const page = browser.newContext().newPage();
  page.setContent(`
    <iframe></iframe>
    <span>outside</span>
  `);

  page.evaluate(() => {
    document.querySelector('iframe').contentDocument.write("<span>inside</span>")
  });

  console.log(page.evaluate(() => {
    return document.querySelector('iframe').contentWindow.document.getElementsByTagName('span')[0].innerText
  }));

  page.close();
  browser.close();
}

When you execute the script using xk6-browser, it should return inside. Please let me know if it helps you.

5

Awesome! this workaround works fine! glad to bump this! :tada:

1 Like
6

Hi @inanc,

I’ve been trying your solution lately but got this error:

evaluating JS: DOMException: Blocked a frame with origin from accessing a cross-origin frame.

How can I resolve this solution?

7

Hi @minhhd,

Welcome to the forum.

Could you share your test script? It looks like the website under test is trying to access an iframe from a different origin, and it might be best to resolve that issue.

We do provide a workaround which should work if you add bypassCSP: true when creating a newContext:

const context = browser.newContext({
  bypassCSP: true
});

Cheers,
Ankur

1 Like