Not Able to Select Code in grafana UI using xk6 browser tool

Grafana k6 k6-browser
1

I am trying to use xk6-browser load testing tool on grafana UI. And i want to do a query using the Tool. In the grafana UI when i am trying to shift from Builder to Code which is of Type radio I am getting error as getting element position: node is either not visible or not an HTMLElement. U can see in the below image .

image
image1920Ă—993 133 KB

The code i am using is

    let code_button=page.$("input[checked]");
    code_button.click();
    page.waitForSelector('div[data-testid="loki-editor"]',{ timeout: 50000 })
    sleep(5)
    page.screenshot({ path: '/Users/jaswanthcherukuri/xk6-browser/test/screenshot6.png' });
    console.log("Exit");
    sleep(10);

The error I am getting is

ERRO[0049] Uncaught (in promise) clicking on element: getting element position: node is either not visible or not an HTMLElement executor=per-vu-iterations scenario=default

There are no distinct elements in the html code for the both builder and code. Any help is appreciated.

3

Hi!,

So I believe the problem was on the locator selector expression, as, at least in my test using latest Grafana version Docker container, that selector was returning more than one element from the page.
Also I had some troubles actually making the page change due to a click in the toggle/radio button. I believe the proper click event is associated with the toggle button label. I got it working by using selector “label[for=option-code-radiogroup-4]” in order to change to “code” view.

Following your code example:

page.waitForSelector('label[for^=option-code]');
let code_button=page.$("label[for^=option-code]");
code_button.click();

You can probably refine more this selector by taking a better look at the container div for the radio button and the radio button properties themselves.

Let me know if that fixes your issue.

1 Like
4

Hi!,

Thanks for the response but in the selector “label[for=option-code-radiogroup-4]” the number 4 will change everytime we run the load test. So we cant use that to find that element. Is there any way to get the selector like “label[for=option-code-radiogroup-*]” where it should work for any number it comes after radiogroup.

Thanks in advance…

5

Yes, see my code example where I use:

page.$("label[for^=option-code]");

That will match the label element which “for” property starts by “option-code”.
That should work, in any case you can always refine the selector by examining better the HTML elements around the radio button / label. See Selecting Elements doc.

1 Like
6

yes thank you its working…