Clicking on stroke of dynamic path using Selenium











up vote
2
down vote

favorite












In SVG you can have things which are only clickable at the stroke, e.g. because there is no fill or because of pointer-events: stroke.



Example:






document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})

#path1:hover {
stroke: red;
}

#path2:hover {
stroke: green;
}

<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="none" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="none" id="path2" />
</svg>





In my project I want to write Selenium tests for I have a dynamically generated SVG <path>s which I want to click at using Selenium, the problem is that the center of the element1 is not necessarily clickable (since only the stroke of the path is).



Some ideas I had:




  • Clicking at a fixed offset: A possibility but since the generated path is highly dynamic it would mean a lot of tinkering with the offset value to get it right and possibly having to change the test a lot of the future.


  • Triggering click event through code: Would work but make the test less useful since this way it would not test whether the stroke of the path is indeed clickable. Certain bugs could evade being detected by the test this way.


  • Setting a non-none fill through code or replacing/adding filled a rect around the <path>: Setting fill might not guarantee either that the center is clickable. A <rect> would work but then the clickable areas of multiple paths would overlap which could mean that the wrong path gets the click.



None of these approaches are ideal. Are there any other possibilities?



(I am using Selenium for Python but I am OK with solutions with Selenium for other programming languages since normally it's easy to port.)



1) This is the default position Selenium clicks at if using the function where no offset is specified, or rather it's the center of the visible area of the element since the newest version of the WebDriver protocol but in my use case everything can be assumed to be fully visible.





P.S.
Demo showing why setting fill to something other than none wouldn't help (or pointer-events to all):






document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})

#path1:hover {
stroke: red;
}

#path2:hover {
stroke: green;
}

<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="turquoise" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="yellow" id="path2" />
</svg>












share|improve this question
























  • I don't know about Selenium but one solution to your problem may be fill:transparent or using a transparent rgb or hsl color: fill:rgba(0,0,0,0)
    – enxaneta
    Nov 22 at 13:43






  • 1




    @enxaneta This was my 3rd idea in the list, does not work for paths. I will edit my post so you can see why.
    – phk
    Nov 22 at 13:44















up vote
2
down vote

favorite












In SVG you can have things which are only clickable at the stroke, e.g. because there is no fill or because of pointer-events: stroke.



Example:






document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})

#path1:hover {
stroke: red;
}

#path2:hover {
stroke: green;
}

<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="none" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="none" id="path2" />
</svg>





In my project I want to write Selenium tests for I have a dynamically generated SVG <path>s which I want to click at using Selenium, the problem is that the center of the element1 is not necessarily clickable (since only the stroke of the path is).



Some ideas I had:




  • Clicking at a fixed offset: A possibility but since the generated path is highly dynamic it would mean a lot of tinkering with the offset value to get it right and possibly having to change the test a lot of the future.


  • Triggering click event through code: Would work but make the test less useful since this way it would not test whether the stroke of the path is indeed clickable. Certain bugs could evade being detected by the test this way.


  • Setting a non-none fill through code or replacing/adding filled a rect around the <path>: Setting fill might not guarantee either that the center is clickable. A <rect> would work but then the clickable areas of multiple paths would overlap which could mean that the wrong path gets the click.



None of these approaches are ideal. Are there any other possibilities?



(I am using Selenium for Python but I am OK with solutions with Selenium for other programming languages since normally it's easy to port.)



1) This is the default position Selenium clicks at if using the function where no offset is specified, or rather it's the center of the visible area of the element since the newest version of the WebDriver protocol but in my use case everything can be assumed to be fully visible.





P.S.
Demo showing why setting fill to something other than none wouldn't help (or pointer-events to all):






document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})

#path1:hover {
stroke: red;
}

#path2:hover {
stroke: green;
}

<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="turquoise" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="yellow" id="path2" />
</svg>












share|improve this question
























  • I don't know about Selenium but one solution to your problem may be fill:transparent or using a transparent rgb or hsl color: fill:rgba(0,0,0,0)
    – enxaneta
    Nov 22 at 13:43






  • 1




    @enxaneta This was my 3rd idea in the list, does not work for paths. I will edit my post so you can see why.
    – phk
    Nov 22 at 13:44













up vote
2
down vote

favorite









up vote
2
down vote

favorite











In SVG you can have things which are only clickable at the stroke, e.g. because there is no fill or because of pointer-events: stroke.



Example:






document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})

#path1:hover {
stroke: red;
}

#path2:hover {
stroke: green;
}

<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="none" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="none" id="path2" />
</svg>





In my project I want to write Selenium tests for I have a dynamically generated SVG <path>s which I want to click at using Selenium, the problem is that the center of the element1 is not necessarily clickable (since only the stroke of the path is).



Some ideas I had:




  • Clicking at a fixed offset: A possibility but since the generated path is highly dynamic it would mean a lot of tinkering with the offset value to get it right and possibly having to change the test a lot of the future.


  • Triggering click event through code: Would work but make the test less useful since this way it would not test whether the stroke of the path is indeed clickable. Certain bugs could evade being detected by the test this way.


  • Setting a non-none fill through code or replacing/adding filled a rect around the <path>: Setting fill might not guarantee either that the center is clickable. A <rect> would work but then the clickable areas of multiple paths would overlap which could mean that the wrong path gets the click.



None of these approaches are ideal. Are there any other possibilities?



(I am using Selenium for Python but I am OK with solutions with Selenium for other programming languages since normally it's easy to port.)



1) This is the default position Selenium clicks at if using the function where no offset is specified, or rather it's the center of the visible area of the element since the newest version of the WebDriver protocol but in my use case everything can be assumed to be fully visible.





P.S.
Demo showing why setting fill to something other than none wouldn't help (or pointer-events to all):






document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})

#path1:hover {
stroke: red;
}

#path2:hover {
stroke: green;
}

<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="turquoise" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="yellow" id="path2" />
</svg>












share|improve this question















In SVG you can have things which are only clickable at the stroke, e.g. because there is no fill or because of pointer-events: stroke.



Example:






document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})

#path1:hover {
stroke: red;
}

#path2:hover {
stroke: green;
}

<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="none" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="none" id="path2" />
</svg>





In my project I want to write Selenium tests for I have a dynamically generated SVG <path>s which I want to click at using Selenium, the problem is that the center of the element1 is not necessarily clickable (since only the stroke of the path is).



Some ideas I had:




  • Clicking at a fixed offset: A possibility but since the generated path is highly dynamic it would mean a lot of tinkering with the offset value to get it right and possibly having to change the test a lot of the future.


  • Triggering click event through code: Would work but make the test less useful since this way it would not test whether the stroke of the path is indeed clickable. Certain bugs could evade being detected by the test this way.


  • Setting a non-none fill through code or replacing/adding filled a rect around the <path>: Setting fill might not guarantee either that the center is clickable. A <rect> would work but then the clickable areas of multiple paths would overlap which could mean that the wrong path gets the click.



None of these approaches are ideal. Are there any other possibilities?



(I am using Selenium for Python but I am OK with solutions with Selenium for other programming languages since normally it's easy to port.)



1) This is the default position Selenium clicks at if using the function where no offset is specified, or rather it's the center of the visible area of the element since the newest version of the WebDriver protocol but in my use case everything can be assumed to be fully visible.





P.S.
Demo showing why setting fill to something other than none wouldn't help (or pointer-events to all):






document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})

#path1:hover {
stroke: red;
}

#path2:hover {
stroke: green;
}

<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="turquoise" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="yellow" id="path2" />
</svg>








document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})

#path1:hover {
stroke: red;
}

#path2:hover {
stroke: green;
}

<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="none" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="none" id="path2" />
</svg>





document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})

#path1:hover {
stroke: red;
}

#path2:hover {
stroke: green;
}

<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="none" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="none" id="path2" />
</svg>





document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})

#path1:hover {
stroke: red;
}

#path2:hover {
stroke: green;
}

<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="turquoise" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="yellow" id="path2" />
</svg>





document.querySelector("#path1").addEventListener("click", function(e) {
console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
console.log("Click2!")
})

#path1:hover {
stroke: red;
}

#path2:hover {
stroke: green;
}

<svg height="300" width="300">
<path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="turquoise" id="path1" />
<path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="yellow" id="path2" />
</svg>






selenium svg






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 at 15:29

























asked Nov 22 at 13:07









phk

7121331




7121331












  • I don't know about Selenium but one solution to your problem may be fill:transparent or using a transparent rgb or hsl color: fill:rgba(0,0,0,0)
    – enxaneta
    Nov 22 at 13:43






  • 1




    @enxaneta This was my 3rd idea in the list, does not work for paths. I will edit my post so you can see why.
    – phk
    Nov 22 at 13:44


















  • I don't know about Selenium but one solution to your problem may be fill:transparent or using a transparent rgb or hsl color: fill:rgba(0,0,0,0)
    – enxaneta
    Nov 22 at 13:43






  • 1




    @enxaneta This was my 3rd idea in the list, does not work for paths. I will edit my post so you can see why.
    – phk
    Nov 22 at 13:44
















I don't know about Selenium but one solution to your problem may be fill:transparent or using a transparent rgb or hsl color: fill:rgba(0,0,0,0)
– enxaneta
Nov 22 at 13:43




I don't know about Selenium but one solution to your problem may be fill:transparent or using a transparent rgb or hsl color: fill:rgba(0,0,0,0)
– enxaneta
Nov 22 at 13:43




1




1




@enxaneta This was my 3rd idea in the list, does not work for paths. I will edit my post so you can see why.
– phk
Nov 22 at 13:44




@enxaneta This was my 3rd idea in the list, does not work for paths. I will edit my post so you can see why.
– phk
Nov 22 at 13:44

















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431725%2fclicking-on-stroke-of-dynamic-path-using-selenium%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431725%2fclicking-on-stroke-of-dynamic-path-using-selenium%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

Calculate evaluation metrics using cross_val_predict sklearn

Insert data from modal to MySQL (multiple modal on website)