Click on an svg element doesn't trigger a click event.

[Supamiu]

Following #2272, it's still not possible to click on a svg element.

Using element(by.tagName('svg')).click() throws an "element not visible" error.

Using browser.actions().click(element.all(by.css('svg')).get(0).getWebElement()).perform(); as suggested in the last issue doesn't throw an error, but the click action is not performed.

• Node Version: 8.2.1
• Protractor Version: 5.1.2
• Angular Version: 1.4.8
• Browser(s): Chrome 61.0.3163.91
• Operating System and Version Windows 10
• Your protractor configuration file

const fs = require("fs");

exports.config = {
    framework: 'jasmine',
    directConnect: true,
    allScriptsTimeout: 360000,
    specs: ['tests/**/*.spec.js'],
    multiCapabilities: [
        {
            browserName: 'chrome',
            chromeOptions: {
                args: ['--no-sandbox', '--test-type=browser'],
                // Set download path and avoid prompting for download even though
                // this is already the default on Chrome but for completeness
                prefs: {
                    'download': {
                        prompt_for_download: false,
                        default_directory: '\\reports\\',
                        init: function () {
                            this.default_directory = process.cwd() + this.default_directory;
                            return this;
                        }
                    }.init()
                }
            }
        }
    ],
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 360000
    }
};

• A relevant example test

it('Should be able to annotate a MEGA design', function(){
    browser.actions().click(element.all(by.css('svg')).get(0).getWebElement()).perform();
    //Clicking on the svg adds a little box with a "Double click to edit" text element in it, it works when a human does it.
    browser.actions().doubleClick(element(by.cssContainingText('text', 'Double click to edit'))).perform();
    element(by.id('inplaceeditor')).clear();
    element(by.id('inplaceeditor')).sendKeys('Testing Sticky note');
    element(by.linkText('Stop annotating')).click();
    expect(element(by.cssContainingText('text', 'Testing Stcky note')).isPresent()).toBeTruthy();
});

• Output from running the test

Failed: No element found using locator: by.cssContainingText("text", "Double click to edit")
NoSuchElementError: No element found using locator: by.cssContainingText("text", "Double click to edit")

• Steps to reproduce the bug
  • Add an svg element to your page
  • Add a click listener that spawns a DOM element.
  • Create a test that clicks on the svg element.
  • The DOM element is not created, while it is if you do it by hand.

[sdjnaik]

Hi @Supamiu ,

Did you find solution for this? I am facing same issue same as one you have mentioned above.

[xgqfrms]

css pointer-events

maybe it's help

/* disabled svg click event */

svg {
  pointer-events: none;
}

/* enabled svg click event */
svg {
  pointer-events: all;
}

---

but svg element not support trigger click event in js

todo

[zarikadzer]

It helped me click on the inner svg-g element.
await browser.executeScript(```const el=window.document.querySelector('.selector-of-any-inner-svg-element');el.style.pointerEvents='all';el.dispatchEvent(new Event('click',{bubbles:true}))```);