Click on an svg element doesn't trigger a click event.
Author: SupamiuCreated Sep 19, 2017Updated Sep 22, 2023
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.
Source: angular/protractor