Right click on element using k6 browser

Grafana k6 k6-browser
1

Hi Team,

Is there any other way to do a right click on text element ?

Used line of code :

const element = page.locator(‘id_here’);
await element.click({button:‘right’});

Above line of code is making a default left click on the element.

2

Hi, the code seems right, and it should work. For example:

const element = page.locator('#id_here'); // <- mind the sharp (#)
await element.click({button:'right'});

Also, make sure that you’re using single-quotes (like this: ').

1 Like
3

Thanks for your reply!

I am running the k6 code in headless mode and I could see that the text element is getting clicked (left click) but right click is not happening.

4

Sure. I’ve tested this locally, and it works. Maybe there’s an edge case we don’t handle. Could you share your script?

6

image

Sorry, I can’t share the script. But the scenario looks similar to the above image. One text element is there and on right click, a menu appears & from that menu I need to select the first option. sample HTML code

7

Hi @betsybenny2000,

I can’t reproduce this problem. Please send me a private forum message (containing your script) if it’s possible.

Thank you.

8

Hi @inancgumus ,

Sorry for the late reply! I have found one page which is used for testing context menus. Below one is the sample code which I have tried using k6.

export default async function ()
{
const page = browser.newPage();
await page.goto(‘Context menu page for Automation Testing Practice’);
sleep(5);
const box = page.locator(‘//*[@id=“hot-spot”]’);
await box.click({button:‘right’});
sleep(5);
}

I have tried to do a right click action on the element but not getting the response as expected. Could you please give it a try ?

Thanks in advance!

9

Hi @betsybenny2000,

To give it a try and reproduce, we need a sample HTML and the whole script. From a wild guess, it seems like that the page hasn’t been loaded yet. Could you try waitUntil options as explained here?

10

Hi @inancgumus,

You can download the sample HTML code from the below link,

https://www.codingnepalweb.com/right-click-context-menu-html-javascript/

image
image821×365 23.3 KB

K6 Script

import { browser } from 'k6/experimental/browser';
import {sleep} from 'k6';
export const options = {
  scenarios: {
    ui: {
      executor: 'shared-iterations',
      options: {
        browser: {
          type: 'chromium',
        },
      },
    },
  },
}

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

  try {
    await page.goto('index.html');
    sleep(5);
   await page.click({button:'right'});
   sleep(5);
  } finally {
    page.close();
  }
}

image
image1012×491 29.4 KB
- On right click a menu will appear on the screen with some options.

Also I have tried the waitUntil options as you suggested but it didn’t worked for me.

11

Thanks, @betsybenny2000.

The following script works. page.click’s first argument should be a selector.

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

export const options = {
  scenarios: {
    ui: {
      executor: "shared-iterations",
      options: {
        browser: {
          type: "chromium",
        },
      },
    },
  },
};

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

  try {
    await page.goto(
        "https://www.codingnepalweb.com/right-click-context-menu-html-javascript/",
        { waitUntil: "networkidle" } // or "load"
    );
    await page.click('.td-post-header', { button: "right" });
  } finally {
    page.close();
  }
}

Screenshot 2024-06-11 at 17.05.37
Screenshot 2024-06-11 at 17.05.371920×1410 174 KB

1 Like
12

Thanks @inancgumus for highlighting the issue.

Could you please try from this link also? https://practice.expandtesting.com/context-menu#google_vignette

In the below script, I have tried to pass the id of the box element inside page.click to trigger the alert message but it didn’t worked.

K6 Script

import { browser } from "k6/experimental/browser";
import {sleep} from 'k6';
export const options = {
  scenarios: {
    ui: {
      executor: "shared-iterations",
      options: {
        browser: {
          type: "chromium",
        },
      },
    },
  },
};

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

  try {
    await page.goto(
        "https://practice.expandtesting.com/context-menu#google_vignette",
        { waitUntil: "load" }
    );
    await page.click('#hot-spot', { button: "right" });
    sleep(5);
  } finally {
    page.close();
  }
}

image
image1094×489 24.8 KB

Expected Response : When we do a right click inside the box element, alert message pops up.