Getting TypeError: Object has no member 'contentFrame' after migrating browser scripts to k6 v0.52

Grafana k6 k6-browser
1

Hello,

I am getting the following error after I migrate my browser test script into k6 v0.52
ERRO[0007] Uncaught (in promise) TypeError: Object has no member ‘contentFrame’

async _clickCaptcha() {
    const iframeHandle = this.page.waitForSelector('//iframe[@title="reCAPTCHA"]', { state: 'visible' });
    const frame = iframeHandle.contentFrame();
    const button1 = frame.waitForSelector('#recaptcha-anchor');
    await button1.dispatchEvent('click');
    await button1.waitForElementState('checked');
}

getting the error for the following line:
const frame = iframeHandle.contentFrame();

This code is working for ‘k6/experimental/browser’

3

Hi @meteboyaci11,

The k6/browser is now fully async. As explained in this migration document and also in the k6 browser documentation, you need use await for waitForSelector and contentFrame.

I hope this helps.

5

Hi @inancgumus
Yes it worked after adding await for waitForSelector and contentFrame. Thank you very much for your help.

Regards.

2 Likes
6

This worked for me:

const iframeSelector = 'iframe[title="Stripe address form"]';
await page.waitForSelector(iframeSelector, { visible: true, timeout: 10000 });
const iframeElement = await page.$(iframeSelector);
const iframeContent = await iframeElement.contentFrame();

// Interact with form elements
await iframeContent.waitForSelector('input[name="name"]', { visible: true, timeout: 10000 });
await iframeContent.click('input[name="name"]');
await iframeContent.type('input[name="name"]', 'John Doe'); // <input type="text" />

Full example:

import { browser } from 'k6/browser'; // k6 v0.57.0 (go1.24.0, darwin/arm64)

export const options = {
  scenarios: {
    ui: {
      executor: 'constant-vus',
      vus: 1,
      duration: '10s',
      options: {
        browser: {
          type: 'chromium',
          bypassCSP: true,
          headless: true,
        },
      },
    },
  }
};

export default async function loadTest() {
  const page = await browser.newPage();

  try {
    await page.goto('http://localhost:3000');
    await page.locator('//h2[text()="Checkout Page"]').waitFor({ state: 'visible', timeout: 10000, });

    // Wait for the iframe to finish loading
    await page.waitForSelector('iframe[title="Stripe address form"]', { visible: true, timeout: 10000 });
    const iframeElement = await page.$('iframe[title="Stripe address form"]');
    const iframeContent = await iframeElement.contentFrame();
    // Interact with form elements
    await iframeContent.waitForSelector('input[name="name"]', { visible: true, timeout: 10000 });
    await iframeContent.click('input[name="name"]');
    await iframeContent.type('input[name="name"]', 'John Doe'); // <input type="text" />
    await iframeContent.locator('select[name="state"]').selectOption('NY'); // <input type="select" />
    // ...
  } finally {
    await page.close();
  }
}