Selenium webdriver mouse hover on svg tag

Question

I have a hidden svg tag which shows an image only after mouse hover to it:

[![<div id="available_roles" bp-org-diagram="" data-options="myOptions" data-on-highlight-changed="onMyHighlightChanged()" data-on-cursor-changed="onMyCursorChanged()" style="height: 95%; width: 100%; overflow: hidden;" class="ng-isolate-scope ui-widget"><div tabindex="0" class="famdiagram" style="position: relative; overflow: auto; top: 0px; left: 0px; width: 732px; height: 760px; padding: 0px; margin: 0px; display: block;"><div class="placeholder famdiagram" style="position: absolute; overflow: hidden; top: 0px; left: 0px; width: 707px; height: 735px; transform-origin: 0px 0px 0px; transform: scale(1, 1);">
<div class="Layer9" style="position: absolute; width: 0px; height: 0px;">
<svg version="1.1" viewbox="0 0 260 237.5" style="width: 260px; height: 237.5px; position: absolute;">
<path fill="#000000" fill-opacity="0.2" stroke="transparent" stroke-width="0" stroke-dasharray="" d="M50.5 74.5L122.5 74.5L130.5 50.5L138.5 74.5L210.5 74.5Q214.5 74.5 214.5 78.5L214.5 188.5Q214.5 192.5 210.5 192.5L50.5 192.5Q46.5 192.5 46.5 188.5L46.5 78.5Q46.5 74.5 50.5 74.5" style="visibility: hidden;"></path>
</svg>
<div class="bp-item bp-corner-all bt-item-frame" style="width: 160px; height: 110px; top: 77.5px; left: 50px; position: absolute; padding: 0px; margin: 0px; visibility: hidden;">][1]][1]

I have tried following and not successful so far:

WebElement we = driver.findElement(By.cssSelector("#available_roles>div>div>div.calloutplaceholder.famdiagram>div>svg"));
            Actions action = new Actions(driver);
            action.moveToElement(we).moveToElement(driver.findElement(By.cssSelector("#available_roles>div>div>div.calloutplaceholder.famdiagram>div>svg>path"))).click().build().perform();

Selenium IDE give me this but does not work too in Chrome, css=div.Layer9 > svg — Sneh Tripathi, Dec 24 '15 at 12:10
Hi, i am bit confused.. you need to move to svg tag correct? if that svg tag is hidden then you can't do move..just use jacascriptExecutor to make it visible and go for moveToElement. — murali selenium, Dec 28 '15 at 11:21
Thanks. How can i use javascriptExecutor to make it visible? — Sneh Tripathi, Dec 28 '15 at 12:12
look at http://stackoverflow.com/questions/20371077/how-to-create-javascript-executor-to-make-element-visible-in-selenium-webdriver and http://stackoverflow.com/questions/20390986/how-to-make-the-hidden-element-visible-using-java-script-executor — murali selenium, Dec 28 '15 at 12:18

score 0 · Answer 1 · answered Mar 03 '16 at 06:02

Hi please try following function its JAVA SCRIPT mouse hover that will solve your problem as it did for me

public void mouseHoverJScript(WebElement HoverElement) {
        try {
            if (isElementPresent(HoverElement)) {

                String mouseOverScript = "if(document.createEvent){var evObj = document.createEvent('MouseEvents');evObj.initEvent('mouseover', 

true, false); arguments[0].dispatchEvent(evObj);} else if(document.createEventObject) { arguments[0].fireEvent('onmouseover');}";
                ((JavascriptExecutor) driver).executeScript(mouseOverScript,
                        HoverElement);

            } else {
                System.out.println("Element was not visible to hover " + "\n");

            }
        } catch (StaleElementReferenceException e) {
            System.out.println("Element with " + HoverElement
                    + "is not attached to the page document"
                    + e.getStackTrace());
        } catch (NoSuchElementException e) {
            System.out.println("Element " + HoverElement + " was not found in DOM"
                    + e.getStackTrace());
        } catch (Exception e) {
            e.printStackTrace();
            System.out.println("Error occurred while hovering"
                    + e.getStackTrace());
        }
    }

    public static boolean isElementPresent(WebElement element) {
        boolean flag = false;
        try {
            if (element.isDisplayed()
                    || element.isEnabled())
                flag = true;
        } catch (NoSuchElementException e) {
            flag = false;
        } catch (StaleElementReferenceException e) {
            flag = false;
        }
        return flag;
    }`

Selenium webdriver mouse hover on svg tag

1 Answers1