CODEWITHSUNDEEP
svgselenium-webdriverwatir-webdriverellipse
Jade
Jade

Reputation: 41

how do I find elements under svg tag : elements such as rect, g, ellipse

Below is the HTML details:

<svg class="fs-dynamic-layout-svg" width="767" height="448">
  <path class="edge dragline hidden" d="M0,0L0,0">
  <defs>
  <rect class="pop-rectangle STATE_INIT" x="10" y="20" width="363.5" height="184">
  <rect class="pop-rectangle STATE_INIT" x="393.5" y="20" width="363.5" height="184">
  <rect class="pop-label-bg STATE_INIT" x="0" y="0" width="0" height="0" style="fill: rgb(20, 185, 173); stroke: rgb(20, 185, 173); stroke-width: 5; stroke-linejoin: round;">

  <svg class="fs-node STATE_INIT" viewBox="0 0 100 100" enable-background="0 0 100 100" width="50" height="50" x="167.58341363831" y="27.30474363934519">
   <g class="fs-node-group fs-router-svg" x="0px" y="0px">
<ellipse class="fs-router-background" cx="49.528" cy="47.768" rx="43.886" ry="44.768">
  <path class="fs-router-path" d="M49.528,11.366c-19.713,0-35.687,16.295-35.687,36.402c0,20.109,15.974,36.403,35.687,36.403 c19.71,0,35.685-">
  <path class="fs-router-path" d="M91.955,47.771c0,0-1.39,56.494-59.276,41.325c0,0,26.368,17.798,46.483,2.063 C87.596,84.562,100.082,71.907,91.955,47.771z">
  **<g class="fs-router-group-plus">
<ellipse class="fs-router-plus-bg" cx="22.577" cy="25.271" rx="11.926" ry="12.166">**
<line class="fs-router-plus-line" x1="22.577" y1="17.246" x2="22.577" y2="32.777">
<line class="fs-router-plus-line" x1="30.189" y1="25.271" x2="14.963" y2="25.271">
<g.....

I need to click on the bolded g tag. The UI is graphical. First time working on SVG elements. I am not able to locate elements. The respective attributes id, class or even index wont help it to locate. Also at UI, these elements are dynamic based on data entered in previous screen. please help me with your inputs. Highly appreciated.

Thank you.

Upvotes: 1

Views: 1149

Answers (1)

Carldmitch
Carldmitch

Reputation: 409

browser.element(:css, "g[class='fs-router-group-plus']")

https://saucelabs.com/resources/articles/selenium-css-selectors

Upvotes: 2

Related Questions