K6 Browser doesn't work with Strong Elements

Grafana k6 k6-browser
1

Hi,

I have a web page that has a icon that user can click to expand into a panel. The page source looks like this (before click):

<strong class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-accordion-header-1" aria-controls="ui-accordion-accordion-panel-1" aria-selected="false" tabindex="0"> <span class="ui-accordion-header-icon ui-icon ui-icon-trangle-1le"></span> == $0 <h3>My Panel</h3> </strong>

My code is trying to click the icon:

page.locator(‘//*[@id=“ui-accordion-accordion-header-1”]/span’).click();

Guess what? k6 cruises through the code, no clicking, no errors either.

Does k6 support strong elements yet?

Thanks,
-Madison

3

I should have mentioned that k6 is the latest:
k6 v0.46.0 (2023-08-14T13:23:26+0000/v0.46.0-0-gcbd9e9ad, go1.20.7, windows/amd64)

4

It’s likely UI Accordion that caused the trouble, not strong element


5

Hi Madison,

k6 primarily focuses on performance testing HTTP services and doesn’t provide full support for browser automation or interactions with web pages like Vermögen clicking elements. For UI testing or interaction, you might want to consider using specialized tools like Selenium or Puppeteer, which are better suited for simulating user actions on web pages. k6 is great for load and performance testing of your APIs and services, but it’s not designed for web UI interactions. Hope this helps clarify things!

6

Hello Madison,

K6 primarily focuses on performance testing and load testing for web applications, and its primary purpose is not to interact with web elements like a browser automation tool would. Therefore, it may not handle clicking on elements in the same way as browser automation tools like Selenium or Puppeteer.

For interacting with web elements, you might want to consider using a tool designed specifically for web automation tasks. If you’re looking to perform performance or load testing with K6 and also need to interact with elements, you could consider integrating K6 with other tools or libraries that handle the web automation part.

Keep in mind that K6’s primary strength lies in its Top performance testing capabilities, and for web automation, dedicated tools like Selenium or Puppeteer are more suitable.

7

Hi @madisonli,

Could you please provide the following so that I can try to replicate the issue?:

  1. the version of k6 you are you using;
  2. the OS and version you are running k6 on;
  3. the whole test script that exhibits this issue, preferably pointing to a publicly accessible website;
  4. full output of the test run.

@darrontrosclairson1 and @priddybroderickson5 k6 now offers the browser module which can be used to automate browser and end-to-end web testing with k6.

Cheers,
Ankur

EDIT: Noted the k6 and OS version :+1:

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

2 Likes
9

Hi @ankur,

Below is the code created for a public website.
The purpose is to show k6 doesn’t do the click if the object is accordion:

import { check, sleep } from 'k6';
import { Trend } from 'k6/metrics';
import { browser } from 'k6/experimental/browser';

export const options = {
  scenarios: {
    ui: {
      executor: 'shared-iterations',
      options: {
        browser: {
          type: 'chromium',
        },
      },
    },
  },
  thresholds: {
    checks: ["rate==1.0"]
  }
}

const home='https://www.macys.com/shop/womens-clothing?id=118&cm_sp=us_hdr-_-women-_-118_women';

export default async function() {
	
	const context = browser.newContext();
	const page = context.newPage();	
	
	await page.goto(home);
		
	const my_accordion = page.locator('//*[@id="categoryTree"]/div/ul/li[3]/div[1]/h5/div[2]');
	my_accordion.clck();
	
	sleep(1);
		
	page.close();
	browser.close();
		
}
10

Hi @madisonli,

I was able to get the accordion to work and click on the element titled “Women’s Clothing” with the following script (which were verified using screenshots):

import { check, sleep } from 'k6';
import { Trend } from 'k6/metrics';
import { browser } from 'k6/experimental/browser';

export const options = {
  scenarios: {
    ui: {
      executor: 'shared-iterations',
      options: {
        browser: {
          type: 'chromium',
        },
      },
    },
  },
  thresholds: {
    checks: ["rate==1.0"]
  }
}

const home='https://www.macys.com/shop/womens-clothing?id=118&cm_sp=us_hdr-_-women-_-118_women';

export default async function() {
	const context = browser.newContext();
	const page = context.newPage();	
	
	await page.goto(home);

  page.screenshot({ path: "before.png" });
		
	const my_accordion = page.locator('//*[@id="categoryTree"]/div/ul/li[4]/div[1]/h5/div[2]');
	await my_accordion.click();

  sleep(1);

  page.screenshot({ path: "after.png" });

	page.close();
}

Which element were you trying to click on?

Cheers,
Ankur

11

@Ankur - Thanks for looking into this.

The code snippet works intermittently. When it doesn’t work, the error message is this:

panic: GoError: handling frameNavigated event to “https://tr.snapchat.com/cm/p?rand=1695432480395&pnid=140&pcid=c1a4b0d7-17e6-4a17-889c-374e3a20a375”: we either navigate top level or have old version of the navigated frame
ui [--------------------------------------] 1 VUs 00m05.4s/10m0s 0/1 shared iters
goroutine 2942 [running]:
go.k6.io/k6/js/common.Throw(0x1e02846?, {0x20a8ac0?, 0xc001e46740?})
go.k6.io/k6/js/common/util.go:20 +0x4d
github.com/grafana/xk6-browser/k6ext.Panic.func1(0x1ba7000?, {0xc001e46700?, 0x1c37501?, 0xc0011815c0?})
github.com/grafana/xk6-browser@v1.0.2/k6ext/panic.go:35 +0x4a
github.com/grafana/xk6-browser/k6ext.sharedPanic({0x20ba030, 0xc0012c6050}, 0xc002ec7d18, {0xc001e46700?, 0x2, 0x2})
github.com/grafana/xk6-browser@v1.0.2/k6ext/panic.go:64 +0x265
github.com/grafana/xk6-browser/k6ext.Panic({0x20ba030?, 0xc0012c6050?}, {0x1e02846?, 0x0?}, {0xc001e46700?, 0x20?, 0xc0035b3320?})
github.com/grafana/xk6-browser@v1.0.2/k6ext/panic.go:37 +0x65
github.com/grafana/xk6-browser/common.(*FrameSession).onFrameNavigated(0xc000d326e0, 0xc0006c4240, 0x20?)
github.com/grafana/xk6-browser@v1.0.2/common/frame_session.go:722 +0x315
github.com/grafana/xk6-browser/common.(*FrameSession).initEvents.func1()
github.com/grafana/xk6-browser@v1.0.2/common/frame_session.go:240 +0x6f4
created by github.com/grafana/xk6-browser/common.(*FrameSession).initEvents
github.com/grafana/xk6-browser@v1.0.2/common/frame_session.go:211 +0x1ab

12

Additional information:

If I try to click on accordion object in our internal website, I got this error:

This file contains custom JavaScript code that uses the internal JQueryUI library (accordion()), which is not supported. For more information, see https://community.tibco.com/wiki/best-practices-writing-custom-javascript-code-text-areas." browser_source=console-api source=browser

13

Hi @madisonli,

This file contains custom JavaScript code that uses the internal JQueryUI library (accordion()), which is not supported. For more information, see https://community.tibco.com/wiki/best-practices-writing-custom-javascript-code-text-areas." browser_source=console-api source=browser

That error message is coming from your website i believe, so it will need to be resolved from there. the browser module in k6 doesn’t use the internal JQueryUI library accordion().

Cheers,
Ankur

14

Hi @madisonli,

panic: GoError: handling frameNavigated event to “https://tr.snapchat.com/cm/p?rand=1695432480395&pnid=140&pcid=c1a4b0d7-17e6-4a17-889c-374e3a20a375”: we either navigate top level or have old version of the navigated frame

Which test were you running when you received this error? I unfortunately can’t reproduce it with the test script i added to this thread earlier.

Cheers,
Ankur