How to right click on a svg element using JavascriptExecutor in selenium

Question

I have to right click on a particular portion of my web page.

There are a few svg elements in background layer at the part where i need to right click. These svg elements are in a different layer which is invisible. below is the html code

HTML Code of the svg elements

HTML code of visible part (highlighted div element in image with class value containing 'z-Timeline-TimelineTrack') is something like below (you can also see svg elements part in the below code) HTML code of visible part of webpage

As you see that there are many 'line' elements.. i need to perform a right click on a specified line.

I am able to locate a particular line element using below xpath

@FindBy(xpath ="//*[name()='svg']//*[name()='line'][5]")
public WebElement anyAgendaLine;

After searching over internet, i found that i can use JavascriptExecutor to click on any invisible elements. before finding this i tried using Actions to perform context menu click which gave below error

Caused by: org.openqa.selenium.interactions.MoveTargetOutOfBoundsException: Offset within element cannot be scrolled into view: (2.5, 0.5): [object SVGLineElement]

My code for context menu click is like:

public static void rightClickAndSelectMenuItem(WebElement objWebElement, WebElement menuItem){
        Actions action=new Actions(Setup.driver);
        action.contextClick(objWebElement).sendKeys(Keys.ARROW_DOWN).click(menuItem).build().perform();

}

After finding that context menu click doesn't work, i tried just to click on the 'line' element:

(JavascriptExecutor js = (JavascriptExecutor)driver; 
js.executeScript("arguments[0].click();", objAgendaPage.anyAgendaLine);

which gave below error

org.openqa.selenium.WebDriverException: arguments[0].click is not a function

So please help me out here. I am not even able to just perform a click on this invisible 'line' element. Actually i need to perform a right click.

Don't use screen shots as code, please put the actual code into the question — Liam, Oct 27 '16 at 08:04
Can you add a screenshot of the relevant part of the page? Is it possible to use context click using coordinates instead? Like finding out the location from a container? — Grasshopper, Oct 27 '16 at 08:40
@Liam I just thought it would make the question long and also people can get a quick and clear idea on hierarchy of the elements by using image.. — Vihari512, Oct 27 '16 at 08:47
@Grasshopper sorry for the late reply.. it is working now with the method u mentioned.. I got the location of a SVG element (objAgendaPage.anyAgendaLine) and then used those coordinates to right click on the element (objAgendaPage.timeLineTrack) which visible... below is the code.. actions.moveToElement(objAgendaPage.timeLineTrack, objAgendaPage.anyAgendaLine.getLocation().getX(), objAgendaPage.anyAgendaLine.getLocation().getY()).contextClick().click(objAgendaPage.createAppointmentContextualTable).build().perform(); — Vihari512, Nov 01 '16 at 10:03
@Grasshopper I could not directly perform right click on SVG elements as those are in a different layer which is hidden.. hence i had to get location of SVG element and then perform right click on the element which is visible.. Thanks a lot for helping.. — Vihari512, Nov 01 '16 at 10:08
@Grasshopper however, i could not understand what u meant by finding the location from a container.. i googled about the container but failed to get any info.. please lemme know more about the container stuff.. — Vihari512, Nov 01 '16 at 10:10

score 0 · Answer 1 · edited May 23 '17 at 12:07

In order to right click using JavaScript (with the help of this):

js.executeScript("function contextMenuClick(element){
var evt = element.ownerDocument.createEvent('MouseEvents');

var RIGHT_CLICK_BUTTON_CODE = 2;

evt.initMouseEvent('contextmenu', true, true,
     element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, RIGHT_CLICK_BUTTON_CODE, null);

  if (document.createEventObject){
     // dispatch for IE
     return element.fireEvent('onclick', evt)
  }
  else{
     // dispatch for firefox + others
    return !element.dispatchEvent(evt);
  }
}; contextMenuClick();", objAgendaPage.anyAgendaLine);

How to right click on a svg element using JavascriptExecutor in selenium

1 Answers1