Click an element on the page after clicking an element within an iFrame

page.evaluate (mentioned in : Click elements within an iframe - #9 by inancgumus) did not work, but I found another way to click a checkbox within an iframe but now I am getting another error when I get back to page and click submit button on the page.

Below you can see my code:

import {browser} from 'k6/experimental/browser';

export const options = {
    scenarios: {
        ui: {
            // mandatory fields; executor, options-->browser-->type
            executor: 'shared-iterations',
            vus: 1,
            iterations: 1,
            options: {
                browser: {
                    type: 'chromium',
                },
            },
        },
    }
}

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

    try {
        await page.goto('*************/my-dashboard#/sign-in', {waitUntil: 'networkidle'});
        page.screenshot({path: 'screenshot.png'});

        await page.locator('button[id="**********"]').click();

        await page.locator('input[type="email"]').type('*******@mailinator.com');
        await page.locator('input[type="password"]').type('******');


        let frames = await page.frames();
        for (const frame of frames) {

            if (frame.title() === 'reCAPTCHA' && frame.name().startsWith('a')) {
                await frame.waitForLoadState();
                const spanElement = frame.locator('#recaptcha-anchor');
                spanElement.focus();
                spanElement.dispatchEvent('click');
                break;
            }
        }
// not clicking the submit button and getting an error
        await page.locator("button[type='submit']").click();
    } finally {
        page.close();
    }
}

The error I am getting:

panic: GoError: dispose: canceled
running (00m14.2s), 1/1 VUs, 0 complete and 0 interrupted iterations
goroutine 130 [running]:----------------------] 1 VUs  00m14.2s/10m0s  0/1 shared iters
go.k6.io/k6/js/common.Throw(...)
        go.k6.io/k6/js/common/util.go:20
github.com/grafana/xk6-browser/k6ext.Panic.func1(0x207f9c0?, {0xc000302d10?, 0x2112b01?, 0xc000d5eb40?})
        github.com/grafana/xk6-browser@v1.0.2/k6ext/panic.go:35 +0x74
github.com/grafana/xk6-browser/k6ext.sharedPanic({0x2583340, 0xc002629900}, 0xc002479a30, {0xc000302d10?, 0x1, 0x1})
        github.com/grafana/xk6-browser@v1.0.2/k6ext/panic.go:64 +0x256
github.com/grafana/xk6-browser/k6ext.Panic({0x2583340?, 0xc002629900?}, {0x22a440f?, 0xc000310490?}, {0xc000302d10?, 0xc0003104a0?, 0x2008000?})
        github.com/grafana/xk6-browser@v1.0.2/k6ext/panic.go:37 +0x5a
github.com/grafana/xk6-browser/common.(*BaseJSHandle).Dispose(0xc002086dc0)
        github.com/grafana/xk6-browser@v1.0.2/common/js_handle.go:70 +0x9f
github.com/grafana/xk6-browser/common.(*Frame).detach(0xc0026b81c0)
        github.com/grafana/xk6-browser@v1.0.2/common/frame.go:196 +0x14a
github.com/grafana/xk6-browser/common.(*FrameManager).removeFramesRecursively(0xc002798180, 0xc00125d520?)
        github.com/grafana/xk6-browser@v1.0.2/common/frame_manager.go:415 +0x29f
github.com/grafana/xk6-browser/common.(*FrameManager).frameDetached(0xc002798180, {0xc00125d520, 0x20}, {0x229bd17, 0x6})
        github.com/grafana/xk6-browser@v1.0.2/common/frame_manager.go:186 +0x151
github.com/grafana/xk6-browser/common.(*FrameSession).onFrameDetached(0xc00023d970, {0xc00125d520, 0x20}, {0x229bd17, 0x6})
        github.com/grafana/xk6-browser@v1.0.2/common/frame_session.go:710 +0x177
github.com/grafana/xk6-browser/common.(*FrameSession).initEvents.func1()
        github.com/grafana/xk6-browser@v1.0.2/common/frame_session.go:237 +0x596
created by github.com/grafana/xk6-browser/common.(*FrameSession).initEvents in goroutine 42
        github.com/grafana/xk6-browser@v1.0.2/common/frame_session.go:211 +0x193

Hi @meteboyaci1,

Could you please reproduce the issue with a simple HTML and test script and share them with us? So we can help you. Thanks.

PS: waitForLoadState isnā€™t async. You donā€™t have to use await for it.

this response is not helpful.

Sorry to hear that. We empathize with your frustration and want to assist you. However, without an HTML page or a script, we canā€™t reproduce the problem.

Maybe the issue is within the click method. You might want to supply it with a waitForNavigation if necessary, as shown here.

Thanks for your understanding.

I think the problem is relating to browser context. After switching to iFrame and executng the click event on captcha I need to return back to page context again. Because
await page.locator(ā€œbutton[type=ā€˜submitā€™]ā€).click();
for this execution click is not working and getting the mentioned error.

Hmm. Could you remove try and catch? Maybe it can show us a different error.

running (00m07.2s), 1/1 VUs, 0 complete and 0 interrupted iterations
goroutine 118 [running]:----------------------] 1 VUs  00m07.2s/10m0s  0/1 shared iters
go.k6.io/k6/js/common.Throw(...)
        go.k6.io/k6/js/common/util.go:20
github.com/grafana/xk6-browser/k6ext.Panic.func1(0x207f9c0?, {0xc000670310?, 0x2112b01?, 0xc001417ec0?})
        github.com/grafana/xk6-browser@v1.0.2/k6ext/panic.go:35 +0x74
github.com/grafana/xk6-browser/k6ext.sharedPanic({0x2583340, 0xc001268280}, 0xc003031a30, {0xc000670310?, 0x1, 0x1})
        github.com/grafana/xk6-browser@v1.0.2/k6ext/panic.go:64 +0x256
github.com/grafana/xk6-browser/k6ext.Panic({0x2583340?, 0xc001268280?}, {0x22a440f?, 0xc000670210?}, {0xc000670310?, 0xc000670220?, 0x2008000?})
        github.com/grafana/xk6-browser@v1.0.2/k6ext/panic.go:37 +0x5a
github.com/grafana/xk6-browser/common.(*BaseJSHandle).Dispose(0xc00017f5e0)
        github.com/grafana/xk6-browser@v1.0.2/common/js_handle.go:70 +0x9f
github.com/grafana/xk6-browser/common.(*Frame).detach(0xc000b1a000)
        github.com/grafana/xk6-browser@v1.0.2/common/frame.go:196 +0x14a
github.com/grafana/xk6-browser/common.(*FrameManager).removeFramesRecursively(0xc000242540, 0xc0012e4440?)
        github.com/grafana/xk6-browser@v1.0.2/common/frame_manager.go:415 +0x29f
github.com/grafana/xk6-browser/common.(*FrameManager).frameDetached(0xc000242540, {0xc0012e4440, 0x20}, {0x229bd17, 0x6})
        github.com/grafana/xk6-browser@v1.0.2/common/frame_manager.go:186 +0x151
github.com/grafana/xk6-browser/common.(*FrameSession).onFrameDetached(0xc002636210, {0xc0012e4440, 0x20}, {0x229bd17, 0x6})
        github.com/grafana/xk6-browser@v1.0.2/common/frame_session.go:710 +0x177
github.com/grafana/xk6-browser/common.(*FrameSession).initEvents.func1()
        github.com/grafana/xk6-browser@v1.0.2/common/frame_session.go:237 +0x596
created by github.com/grafana/xk6-browser/common.(*FrameSession).initEvents in goroutine 45
        github.com/grafana/xk6-browser@v1.0.2/common/frame_session.go:211 +0x193

this is the error after removing try/catch

is ti possible to create different contex for main page and iframe while starting the script, or first create context for page then for iframe?

I was looking into where this error emanated from. Then I noticed you might be using an older xk6-browser version. Can you use the latest released k6, try again, and share the error output?

is ti possible to create different contex for main page and iframe while starting the script, or first create context for page then for iframe?

All pages share the same browser context, if thatā€™s what you mean. You can find some details here.

As I said before, itā€™s best to reproduce this error somehow with a simple HTML and script. Otherwise, it would be a lot of fruitless back and forth :frowning:

the page I am trying is a very simple login page but the test environment is not open to world so you can not reach to that environment when you run the script. We need a login page using reCAPTCHA and captcha should accept click. If you have any sample page Iā€™ll use that page in my script.

I upgraded to 0.47 but got the same error.

Hi, again. I cannot share the test environment but Iā€™ve created another sample test script which uses a url accessible by you. You can use the following script for debugging purposes.

import {browser} from 'k6/experimental/browser';

export const options = {
    scenarios: {
        ui: {
            // mandatory fields; executor, options-->browser-->type
            executor: 'shared-iterations',
            vus: 1,
            iterations: 1,
            options: {
                browser: {
                    type: 'chromium',
                },
            },
        },
    }
}

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

    try {
        await page.goto('https://www.directline.com/my-dashboard#/sign-in', {waitUntil: 'networkidle'});

        await Promise.all([
            page.locator('button[id="onetrust-accept-btn-handler').click(),
        ]);
        

        let frames = await page.frames();

        for (const frame of frames) {
            if (frame.title() === 'reCAPTCHA' && frame.name().startsWith('a')) {
                console.log('Frame: ' + frame.title() + ' - ' + frame.name());
                const spanElement = frame.locator('#recaptcha-anchor');
                spanElement.focus();
                spanElement.dispatchEvent('click');
            }
        }
    } finally {
        page.close();
    }
}

for this script I am getting the following error:

panic: GoError: dispose: canceled
running (00m08.1s), 1/1 VUs, 0 complete and 0 interrupted iterations
goroutine 44 [running]:-----------------------] 1 VUs  00m08.1s/10m0s  0/1 shared iters
go.k6.io/k6/js/common.Throw(...)
        go.k6.io/k6/js/common/util.go:20
github.com/grafana/xk6-browser/k6ext.Panic.func1(0x20d0cc0?, {0xc000a78260?, 0x2165c01?, 0xc000c508c0?})
        github.com/grafana/xk6-browser@v1.1.0/k6ext/panic.go:35 +0x74
github.com/grafana/xk6-browser/k6ext.sharedPanic({0x25e7378, 0xc001ed60a0}, 0xc002615a30, {0xc000a78260?, 0x1, 0x1})
        github.com/grafana/xk6-browser@v1.1.0/k6ext/panic.go:64 +0x256
github.com/grafana/xk6-browser/k6ext.Panic({0x25e7378?, 0xc001ed60a0?}, {0x22fed21?, 0xc000a53490?}, {0xc000a78260?, 0xc000a534b0?, 0x2056fa0?})
        github.com/grafana/xk6-browser@v1.1.0/k6ext/panic.go:37 +0x5a
github.com/grafana/xk6-browser/common.(*BaseJSHandle).Dispose(0xc000aae320)
        github.com/grafana/xk6-browser@v1.1.0/common/js_handle.go:70 +0x9f
github.com/grafana/xk6-browser/common.(*Frame).detach(0xc0003281c0)
        github.com/grafana/xk6-browser@v1.1.0/common/frame.go:196 +0x14a
github.com/grafana/xk6-browser/common.(*FrameManager).removeFramesRecursively(0xc001ef8900, 0xc0012a76a0?)
        github.com/grafana/xk6-browser@v1.1.0/common/frame_manager.go:415 +0x29f
github.com/grafana/xk6-browser/common.(*FrameManager).frameDetached(0xc001ef8900, {0xc0012a76a0, 0x20}, {0x22f65e3, 0x6})
        github.com/grafana/xk6-browser@v1.1.0/common/frame_manager.go:186 +0x151
github.com/grafana/xk6-browser/common.(*FrameSession).onFrameDetached(0xc0019a1ce0, {0xc0012a76a0, 0x20}, {0x22f65e3, 0x6})
        github.com/grafana/xk6-browser@v1.1.0/common/frame_session.go:710 +0x177
github.com/grafana/xk6-browser/common.(*FrameSession).initEvents.func1()
        github.com/grafana/xk6-browser@v1.1.0/common/frame_session.go:237 +0x596
created by github.com/grafana/xk6-browser/common.(*FrameSession).initEvents in goroutine 79
        github.com/grafana/xk6-browser@v1.1.0/common/frame_session.go:211 +0x193

Hi @meteboyaci1

Thanks for working on an example so we can reproduce this. I was able to get to the same point you did. Weā€™ll get back to this thread as soon as we can. We need some time to investigate to see if we can propose an alternative to the current script.

Please note for future interactions in the forum that the following response is not helping move this forward:

I understand the frustration when something is not working, and you canā€™t figure it out. And the community is here to try and help.

Community members volunteer their time to help, and they need as much information and context as possible to reproduce the issue and help find a solution when possible.

I totally get that it might not be easy for you to provide a reproduction sometimes, and in those situations, itā€™s best to specify why, instead of saying This response is not helpful. Then folks will try to work with your restrictions when possible, weā€™ve all been there and we canā€™t always share all the information. In this case, itā€™s great that you were finally able to provide a reproduction :bowing_woman:

If you are not sure why the information is asked, or what is the concrete ask, please donā€™t be afraid to ask for clarifications. And if you think the additional information should not be needed, explain why you think so, as you might be right. Keep interactions polite and as useful as possible.

Thank you for your understanding.

Cheers!

Thanks, @meteboyaci1. This will significantly help us understand the underlying issue. From my first tests, I see that this error happened only when I ran the test script with the headless mode off (K6_BROWSER_HEADLESS=0). Do you see the error also happening when running the headless mode is ON (K6_BROWSER_HEADLESS=1ā€”this is the default)?

When we add the following:

spanElement.dispatchEvent('click');
sleep(5);

We can see that the click occurs, and the captcha frame appears. Iā€™ve looked into this and discovered that the problem is within the dispose mechanics like (spanElement.dispose()), and it seems like an internal bug :frowning:

Iā€™ve created an issue on our Github repository.

1 Like

Good morning, I didnā€™t get error when I ran in headless mode.

     browser_data_received.......: 8.7 MB 881 kB/s
     browser_data_sent...........: 98 kB  10 kB/s
     browser_http_req_duration...: avg=179.64ms min=79Āµs     med=124.24ms max=783.09ms p(90)=431.08ms p(95)=696.89ms
     browser_http_req_failed.....: 2.00%  āœ“ 3        āœ— 147
     browser_web_vital_cls.......: avg=0.287389 min=0.287389 med=0.287389 max=0.287389 p(90)=0.287389 p(95)=0.287389
     browser_web_vital_fcp.......: avg=694.4ms  min=253.19ms med=694.4ms  max=1.13s    p(90)=1.04s    p(95)=1.09s   
     browser_web_vital_fid.......: avg=399.99Āµs min=399.99Āµs med=399.99Āµs max=399.99Āµs p(90)=399.99Āµs p(95)=399.99Āµs
     browser_web_vital_inp.......: avg=56ms     min=56ms     med=56ms     max=56ms     p(90)=56ms     p(95)=56ms    
     browser_web_vital_lcp.......: avg=1.35s    min=253.19ms med=1.35s    max=2.44s    p(90)=2.22s    p(95)=2.33s   
     browser_web_vital_ttfb......: avg=118.79ms min=32.59ms  med=70.74ms  max=340ms    p(90)=243.15ms p(95)=291.57ms
     data_received...............: 0 B    0 B/s
     data_sent...................: 0 B    0 B/s
     iteration_duration..........: avg=9.35s    min=9.35s    med=9.35s    max=9.35s    p(90)=9.35s    p(95)=9.35s   
     iterations..................: 1      0.101801/s
     vus.........................: 1      min=1      max=1
     vus_max.....................: 1      min=1      max=1


running (00m09.8s), 0/1 VUs, 1 complete and 0 interrupted iterations
ui   āœ“ [======================================] 1 VUs  00m09.8s/10m0s  1/1 shared iters

Hi again,
I added a check into my test script, after adding this check headless mode also started to get error.

        check(page, {
            'header': p => p.locator('h1').textContent() == 'My Account',
        });

Error:

panic: GoError: dispose: disposing element with ID 1063172608013302417.9.1: Cannot find context with specified id (-32000)
running (00m10.9s), 1/1 VUs, 0 complete and 0 interrupted iterations
goroutine 172 [running]:----------------------] 1 VUs  00m10.9s/10m0s  0/1 shared iters
go.k6.io/k6/js/common.Throw(...)
        go.k6.io/k6/js/common/util.go:20
github.com/grafana/xk6-browser/k6ext.Panic.func1(0x20d0cc0?, {0xc001e403b0?, 0x2165c01?, 0xc000dae4c0?})
        github.com/grafana/xk6-browser@v1.1.0/k6ext/panic.go:35 +0x74
github.com/grafana/xk6-browser/k6ext.sharedPanic({0x25e7378, 0xc002c82050}, 0xc000ac7a30, {0xc001e403b0?, 0x1, 0x1})
        github.com/grafana/xk6-browser@v1.1.0/k6ext/panic.go:64 +0x256
github.com/grafana/xk6-browser/k6ext.Panic({0x25e7378?, 0xc002c82050?}, {0x22fed21?, 0xc001e40020?}, {0xc001e403b0?, 0xc001e40030?, 0x2056fa0?})
        github.com/grafana/xk6-browser@v1.1.0/k6ext/panic.go:37 +0x5a
github.com/grafana/xk6-browser/common.(*BaseJSHandle).Dispose(0xc0007ddea0)
        github.com/grafana/xk6-browser@v1.1.0/common/js_handle.go:70 +0x9f
github.com/grafana/xk6-browser/common.(*Frame).detach(0xc000b16000)
        github.com/grafana/xk6-browser@v1.1.0/common/frame.go:196 +0x14a
github.com/grafana/xk6-browser/common.(*FrameManager).removeFramesRecursively(0xc002646300, 0xc0020b4c00?)
        github.com/grafana/xk6-browser@v1.1.0/common/frame_manager.go:415 +0x29f
github.com/grafana/xk6-browser/common.(*FrameManager).frameDetached(0xc002646300, {0xc0020b4c00, 0x20}, {0x22f65e3, 0x6})
        github.com/grafana/xk6-browser@v1.1.0/common/frame_manager.go:186 +0x151
github.com/grafana/xk6-browser/common.(*FrameSession).onFrameDetached(0xc0022b60b0, {0xc0020b4c00, 0x20}, {0x22f65e3, 0x6})
        github.com/grafana/xk6-browser@v1.1.0/common/frame_session.go:710 +0x177
github.com/grafana/xk6-browser/common.(*FrameSession).initEvents.func1()
        github.com/grafana/xk6-browser@v1.1.0/common/frame_session.go:237 +0x596
created by github.com/grafana/xk6-browser/common.(*FrameSession).initEvents in goroutine 132
        github.com/grafana/xk6-browser@v1.1.0/common/frame_session.go:211 +0x193

Hi @meteboyaci1,

I couldnā€™t reproduce the error in headless mode with the following script:

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

  try {
    await page.goto("https://www.directline.com/my-dashboard#/sign-in", {
      waitUntil: "networkidle",
    });

    await Promise.all([
      page.locator('button[id="onetrust-accept-btn-handler').click(),
    ]);

    let frames = await page.frames();

    for (const frame of frames) {
      console.log("----> " + frame.title() + " - " + frame.name());
      if (frame.title() === "reCAPTCHA" && frame.name().startsWith("a")) {
        console.log("====> Frame: " + frame.title() + " - " + frame.name());
        const spanElement = frame.locator("#recaptcha-anchor");
        spanElement.focus();
        spanElement.dispatchEvent("click");
      }
    }

    check(page, {
      header: (p) => p.locator("h1").textContent() == "My Account",
    });
  } finally {
    page.close();
  }
}

What are the differences between this script and yours? Thanks.

Good morning,
I added the check into my test environment script, not the one I sent to you. The error happening after log in to the application and try to validate something on the second page.

Good evening,
Currently there is no option for me to share a script which you can run from you local due to environment restrictions. Iā€™ll try this case after the following issue fixed and released. Dispose panic after clicking on an element inside another frame Ā· Issue #1089 Ā· grafana/xk6-browser Ā· GitHub

Regards.

1 Like

Hi @inancgumus
it seems the fix came with the latest version (v0.51) solved the panic problem. I am not getting panic error anymore and passing the captcha.
The only think I can say is click() is still not working for the elements within the iFrame. You need to use dispatchEvent(ā€˜clickā€™) for the elements within an iFrame but it is ok at the moment.

Hi @meteboyaci11,

Yes, weā€™ve resolved the dispose panic issue.

@bandorko worked on interacting with the elements within an IFrame (PR). However, it seems that we need to enhance this functionality.

Thanks.

1 Like