通过索引识别选择器

Question

我想使用机器人框架自动执行用户悬停在条形图上的操作。

有没有办法通过索引识别条形图？

或者让我使用机器人框架悬停在第一个条形图上的选择器应该是什么？

检查图表时我找不到唯一元素。

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>

Answer 1

可以通过以下方式在 CSS 中选择五个栏中的第一栏：

.recharts-layer.recharts-bar-rectangle:first-child:hover

为了演示这一点，此代码段在悬停栏时将路径的填充颜色更改为蓝色。

.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>

您当然可以通过添加更多祖先来增加选择性类。

通过索引识别选择器

identify selector by index

css

xpath

robotframework