cssxpathrobotframework
identify selector by index
I want to use the robot framework to automate the user action to hover on bar chart.
Is there a way to identify the bar chart by index?
or what should be the selector for me to use the robot framework to hover on the first bar chart?
I could not find a unique element when inspecting the chart.
outerHTML
<div class="recharts-responsive-container" width="1557" height="150" style="outline: green dotted 2px !important;">
<div class="recharts-wrapper" style="position: relative; cursor: default; width: 1557px; height: 150px;">
<svg class="recharts-surface" width="1557" height="150" viewBox="0 0 1557 150" version="1.1" style="">
<defs>
<clipPath id="recharts3-clip" style="">
<rect x="80" y="0" height="100" width="1457"></rect>
</clipPath>
</defs>
<g class="recharts-layer recharts-bar">
<g class="recharts-layer recharts-bar-rectangles">
<g class="recharts-layer">
<g class="recharts-layer recharts-bar-rectangle" style="">
<path width="233" height="5" x="109.14" y="95" cursor="pointer" fill="rgba(191, 60, 175, 0.7)" stroke="rgba(191, 60, 175, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 109.14,95 h 233 v 5 h -233 Z" style=""></path>
</g>
<g class="recharts-layer recharts-bar-rectangle" style="">
<path width="233" height="6.818181818181813" x="400.53999999999996" y="93.18181818181819" cursor="pointer" fill="rgba(254, 75, 131, 0.7)" stroke="rgba(254, 75, 131, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 400.53999999999996,93.18181818181819 h 233 v 6.818181818181813 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="19.545454545454547" x="691.9399999999999" y="80.45454545454545" cursor="pointer" fill="rgba(255, 120, 71, 0.7)" stroke="rgba(255, 120, 71, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 691.9399999999999,80.45454545454545 h 233 v 19.545454545454547 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="17.72727272727272" x="983.3399999999999" y="82.27272727272728" cursor="pointer" fill="rgba(226, 183, 47, 0.7)" stroke="rgba(226, 183, 47, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 983.3399999999999,82.27272727272728 h 233 v 17.72727272727272 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="92.27272727272728" x="1274.74" y="7.7272727272727195" cursor="pointer" fill="rgba(175, 240, 91, 0.7)" stroke="rgba(175, 240, 91, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 1274.74,7.7272727272727195 h 233 v 92.27272727272728 h -233 Z"></path>
</g>
</g>
</g>
</g>
<g class="recharts-cartesian-grid">
<g class="recharts-cartesian-grid-horizontal">
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="100" x2="1537" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="50" x2="1537" y2="50"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="0" x2="1537" y2="0"></line>
</g>
<g class="recharts-cartesian-grid-vertical">
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="225.7" y1="0" x2="225.7" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="517.0999999999999" y1="0" x2="517.0999999999999" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="808.5" y1="0" x2="808.5" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1099.8999999999999" y1="0" x2="1099.8999999999999" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1391.3" y1="0" x2="1391.3" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="0" x2="80" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1537" y1="0" x2="1537" y2="100"></line>
</g>
</g>
<g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="80" y1="100" x2="1537" y2="100" style=""></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="225.7" y1="106" x2="225.7" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="225.7" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="225.7" dy="0.71em">0.00-0.20</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="517.0999999999999" y1="106" x2="517.0999999999999" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="517.0999999999999" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="517.0999999999999" dy="0.71em">0.20-0.40</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="808.5" y1="106" x2="808.5" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="808.5" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="808.5" dy="0.71em">0.40-0.60</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="1099.8999999999999" y1="106" x2="1099.8999999999999" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="1099.8999999999999" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="1099.8999999999999" dy="0.71em">0.60-0.80</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="1391.3" y1="106" x2="1391.3" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="1391.3" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="1391.3" dy="0.71em">0.80-1.00</tspan>
</text>
</g>
</g>
<text offset="5" x="808.5" y="135" class="recharts-text recharts-label" text-anchor="middle">
<tspan x="808.5" dy="0.71em">Range of Word Confidence Scores</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis" style="">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="80" y1="0" x2="80" y2="100"></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="100" x2="80" y2="100"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="100" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">0</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="50" x2="80" y2="50"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="50" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">110</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="0" x2="80" y2="0"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="11" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">220</tspan>
</text>
</g>
</g>
<text x="-100" y="40" width="100" transform="rotate(-90)" class="recharts-text" text-anchor="start">
<tspan x="-100" dy="-2em">Count of Word</tspan>
<tspan x="-100" dy="1em">Confidence</tspan>
<tspan x="-100" dy="1em">Scores</tspan>
</text>
</g>
</svg>
<div class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-top" style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; left: 0px; transform: translate(235.7px, 32px);">
<div class="recharts-default-tooltip" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
<p class="recharts-tooltip-label" style="">0.00-0.20</p>
</div>
</div>
</div>
</div>Solution
The first bar of the five can be selected in CSS by:
.recharts-layer.recharts-bar-rectangle:first-child:hover
To demonstrate this, this snippet changes the path's fill color to blue on hover of the bar.
.recharts-layer.recharts-bar-rectangle:first-child:hover path {
fill: blue;
}<div class="recharts-responsive-container" width="1557" height="150" style="outline: green dotted 2px !important;">
<div class="recharts-wrapper" style="position: relative; cursor: default; width: 1557px; height: 150px;">
<svg class="recharts-surface" width="1557" height="150" viewBox="0 0 1557 150" version="1.1" style="">
<defs>
<clipPath id="recharts3-clip" style="">
<rect x="80" y="0" height="100" width="1457"></rect>
</clipPath>
</defs>
<g class="recharts-layer recharts-bar">
<g class="recharts-layer recharts-bar-rectangles">
<g class="recharts-layer">
<g class="recharts-layer recharts-bar-rectangle" style="">
<path width="233" height="5" x="109.14" y="95" cursor="pointer" fill="rgba(191, 60, 175, 0.7)" stroke="rgba(191, 60, 175, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 109.14,95 h 233 v 5 h -233 Z" style=""></path>
</g>
<g class="recharts-layer recharts-bar-rectangle" style="">
<path width="233" height="6.818181818181813" x="400.53999999999996" y="93.18181818181819" cursor="pointer" fill="rgba(254, 75, 131, 0.7)" stroke="rgba(254, 75, 131, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 400.53999999999996,93.18181818181819 h 233 v 6.818181818181813 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="19.545454545454547" x="691.9399999999999" y="80.45454545454545" cursor="pointer" fill="rgba(255, 120, 71, 0.7)" stroke="rgba(255, 120, 71, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 691.9399999999999,80.45454545454545 h 233 v 19.545454545454547 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="17.72727272727272" x="983.3399999999999" y="82.27272727272728" cursor="pointer" fill="rgba(226, 183, 47, 0.7)" stroke="rgba(226, 183, 47, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 983.3399999999999,82.27272727272728 h 233 v 17.72727272727272 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="92.27272727272728" x="1274.74" y="7.7272727272727195" cursor="pointer" fill="rgba(175, 240, 91, 0.7)" stroke="rgba(175, 240, 91, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 1274.74,7.7272727272727195 h 233 v 92.27272727272728 h -233 Z"></path>
</g>
</g>
</g>
</g>
<g class="recharts-cartesian-grid">
<g class="recharts-cartesian-grid-horizontal">
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="100" x2="1537" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="50" x2="1537" y2="50"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="0" x2="1537" y2="0"></line>
</g>
<g class="recharts-cartesian-grid-vertical">
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="225.7" y1="0" x2="225.7" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="517.0999999999999" y1="0" x2="517.0999999999999" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="808.5" y1="0" x2="808.5" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1099.8999999999999" y1="0" x2="1099.8999999999999" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1391.3" y1="0" x2="1391.3" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="0" x2="80" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1537" y1="0" x2="1537" y2="100"></line>
</g>
</g>
<g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="80" y1="100" x2="1537" y2="100" style=""></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="225.7" y1="106" x2="225.7" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="225.7" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="225.7" dy="0.71em">0.00-0.20</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="517.0999999999999" y1="106" x2="517.0999999999999" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="517.0999999999999" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="517.0999999999999" dy="0.71em">0.20-0.40</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="808.5" y1="106" x2="808.5" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="808.5" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="808.5" dy="0.71em">0.40-0.60</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="1099.8999999999999" y1="106" x2="1099.8999999999999" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="1099.8999999999999" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="1099.8999999999999" dy="0.71em">0.60-0.80</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="1391.3" y1="106" x2="1391.3" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="1391.3" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="1391.3" dy="0.71em">0.80-1.00</tspan>
</text>
</g>
</g>
<text offset="5" x="808.5" y="135" class="recharts-text recharts-label" text-anchor="middle">
<tspan x="808.5" dy="0.71em">Range of Word Confidence Scores</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis" style="">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="80" y1="0" x2="80" y2="100"></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="100" x2="80" y2="100"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="100" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">0</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="50" x2="80" y2="50"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="50" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">110</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="0" x2="80" y2="0"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="11" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">220</tspan>
</text>
</g>
</g>
<text x="-100" y="40" width="100" transform="rotate(-90)" class="recharts-text" text-anchor="start">
<tspan x="-100" dy="-2em">Count of Word</tspan>
<tspan x="-100" dy="1em">Confidence</tspan>
<tspan x="-100" dy="1em">Scores</tspan>
</text>
</g>
</svg>
<div class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-top" style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; left: 0px; transform: translate(235.7px, 32px);">
<div class="recharts-default-tooltip" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
<p class="recharts-tooltip-label" style="">0.00-0.20</p>
</div>
</div>
</div>
</div>You can of course add even more selectivity by adding more ancestors' classes.
- How to exclude an element from view transitions?
- Nesting pseudo-elements inside pseudo-elements
- Using margin on flex items
- How to disable scrolling in the background when the mobile menu is open?
- Is there a way to make a custom border in CSS?
- How to make border with square on corners?
- Position absolute with Left:100% , Child element goes out of the parent continer
- How to setup TailwindCSS in Angular 11.2.0 or lower
- How can I target a specific column or row in a CSS grid layout?
- React Chat Page with Leftbar, Toggle and Bot Component
- What are the differences between @use and @forward in SASS?
- How to Style Blazor InputFile Component
- How to include only part of font-awesome
- Resize Tables with css
- CSS: Getting my sidebar to not be on top of my other content
- How to align checkboxes and their labels consistently cross-browsers
- Does every browser support all unicode?
- Create responsive table using flexbox
- Targeting only Firefox with CSS
- Is it possible to detect Firefox users in pure CSS?
- Is it possible to adjust mat-form-field-outline thickness?
- CSS: center a fixed div
- How to clone an item of a list "li" several times with incremental ids and values
- Angular focus on input while clicking an element
- I'm having trouble with react-datepicker position
- Target first `li` having specific class inside `ul` with css only
- How to position a popover in css
- <h1> element vs "text-h1" class
- How do I highlight text linked to from a separate webpage?
- Rotate SVG path using CSS