Perform a Right Click in Transaction Test

JavaScript to trigger right-click event

Right-click on webpage

The right mouse button is often used to open contextual menus. For example, if you right-click on the Windows desktop, you may see a menu pop up that includes "Change View Options" and "Change Desktop Background." If you right-click on a folder, the menu might include options such as "Open" and "Properties”. Most webpages also use the right-click to open contextual menus.

Events triggered with right-click

In most cases, contextmenu is the mouse event that is fired when the right mouse button is pressed. Although there are other ways to open a context menu (e.g. a special keyboard key), for the scope of this article, we will focus on the contextmenu mouse event.

In the following sections we will look at two examples that trigger a mouse right-click on an element.

Example 1: Simple right-click

Use case: Triggering a right-click on the “About us” menu. On triggering, a context menu pops up on the page.

We will use the runScript command to execute JavaScript and trigger custom events. Not all websites support Selenium commands, so we will use JavaScript to achieve the same effect.

runScript(var element = document.getElementById(“Identifier”);
if (window.CustomEvent) { 
 element.dispatchEvent(new CustomEvent('contextmenu'));
} 
 //Create an event
 else if(document.createEvent) { 
 var ev = document.createEvent('HTMLEvents'); 
 ev.initEvent('contextmenu', true, false);
 //Dispatch an event 
 element.dispatchEvent(ev);
 } else { 
 element.fireEvent('oncontextmenu');
 }”)
)

Note: The code sample above includes comments and indentation for readability. To function properly, the comments must be removed and the entire runScript command must be in one line. The version below can be copied directly into a Transaction test.

runScript(var element = document.getElementById(“Identifier”);if(window.CustomEvent){element.dispatchEvent(new CustomEvent('contextmenu'));}else if(document.createEvent){var ev = document.createEvent('HTMLEvents');ev.initEvent('contextmenu',true,false);element.dispatchEvent(ev);}else{element.fireEvent('oncontextmenu');}”))

Script walk-through

• The element on which the right-click needs to be triggered is stored in the variable element. (In this case, the identifier for the ‘About Us’ button is stored)
• CustomEvent interface is used to create our own custom event. CustomEvent constructor is called, and takes the name of the event as its argument. Here, the name of the event is contextmenu.
• Call dispatchEvent() on the element you want to attach the event to, passing in the new custom event that was created.
• In case the above functionality fails, we have an else where we create an HTML event which returns an object that holds the event contextmenu.
• If both the above options fail to create the event, we fire the oncontextmenu event attribute which is supported on all browsers.

Example 2: Right-click within an iframe

Use case: Trigger a right-click on the product name ‘Wheat’. On triggering, a context menu with four options is popped up on the page. A ‘select’ on one of the options is performed.

1. Element residing in the iframe is identified.

runScript(“var element = window.parent.frames[x].document.getElementById(\"Identifier").getElementsByTagName(\"img\")[0];”)

Here, x represents the index of the iframe.

2. A new CustomEvent is triggered for contextmenu and is dispatched on the element.

runScript(
    “if (window.CustomEvent) {
        element.dispatchEvent(new CustomEvent('contextmenu'));
    }    //Create an event
    else if(document.createEvent) {
        var ev = document.createEvent('HTMLEvents');
        ev.initEvent('contextmenu', true, false); //Dispatch an event
        element.dispatchEvent(ev);
    } else {
        element.fireEvent('oncontextmenu');
    }”
)

Note: The code sample above includes comments and indentation for readability. To function properly, the comments must be removed and the entire runScript command must be in one line. The version below can be copied directly into a Transaction test.

runScript(“if (window.CustomEvent){element.dispatchEvent(new CustomEvent('contextmenu'));}else if(document.createEvent){var ev = document.createEvent('HTMLEvents');ev.initEvent('contextmenu',true,false);element.dispatchEvent(ev);}else{element.fireEvent('oncontextmenu');}”)

To learn more about the events and Catchpoint script troubleshooting, you can refer to this article: https://docs.catchpoint.com/docs/360034808971