Switching to new opened tab with k6-browser

Grafana k6 k6-browser
1

I have a browser test, where after clicking a button on home page a new browser tab opens up. I need to switch to new browser tab and perform further actions on some web elements in the test script.

I have tried to use bringToFront() to switch to new tab but it doesnt seem to be working for me. is it the right method to use to switch browser tab?

I cant provide the URL at the moment to reproduce the exact issue because its not a public web app.

However, the step that mentioned in summary is pretty much what happens.

// click on button to open the new browser tab:

  const openNewPage = page.locator(newPage);
  page.waitForSelector(newPage, { timeout: 60000, visible: true });
  openNewPage.click();
  console.log('Clicked on the button to open new browser tab');
  await sleep(5);

After performing following step:

  await page.bringToFront();
  console.log('Focused on the new Tab...');

when i check console.log('Current URL after opening editor: ', page.url()); in the next step, the URL is still of the previous page and not of the new tab page.

I am not sure if i am something wrong or need to change something here to make it work. would appreciate any help or suggestions.

xk6-browser version

k6 v0.46.0 (2023-08-14T13:23:26+0000/v0.46.0-0-gcbd9e9ad, go1.20.7, linux/amd64)

OS

Ubuntu

2

@rajjnish

After you click on the button which opens a new page, the page variable still refers to the previous page.
You can get all the tabs with:

      const pages=browser.context().pages();

So maybe you could try after the click:

      const pages=browser.context().pages();
      const newPage = pages[pages.length-1];
1 Like
3

Thanks @bandorko ,

I didnt mention it but already had tried this approach as well, but still wasn’t able to switch to the new tab: :frowning:

      const pages=browser.context().pages();
      const newPage = pages[pages.length-1];

       // Switch to the new tab
       await newPage.bringToFront();
4

@rajjnish
For me, when the button opens the new tab, it become the active tab. (I run with K6_BROWSER_HEADLESS=false environment variable, so I see the browser)
And also I can access the content of the new page with the newPage variable.

5

@bandorko ,
I have tried to run the test in headed mode with K6_BROWSER_HEADLESS=false the whole time to see what actually happens in the UI.
Initially when the new tab opens up, it shows up in the browser as active tab but in few seconds(like 3-4), it goes back to the old tab with all the approaches i tried so far.
and the console.log('Current URL after opening editor: ', page.url()); shows the old tab URL even when in the headed mode in UI during run time the new tab is active.

A bit unsure if i could try something else to debug.
Thanks a lot for the help!

6

@rajjnish

You should use newPage.url() insted of page.url() after you get newPage from browser.context() as I suggested above.

2 Likes
7

@bandorko , Thanks for helping out with this one.

I made few smaller mistakes while accessing the elements of new tab instances that were causing the issue. Now i am able to get the new tab url and the right screenshot of the page, which indicates the switching is working fine.
The problem is with the new page, that freezes for quite a long time when opening via k6 script but that doesnt happen while opening the page manually and that took more for me to debug and figure out… though not sure why via script the new page just freezes and not manually… trying to debug it further.

Really appreciate your help. being new to k6 has been quite a learning experience so far!
Cheers!