Javaスクリプトによるハイチャートの自動化

Question

Javaスクリプトを使用してハイチャートグラフを自動化しています。これはセレンでは不可能です。 URLはhttps://www.highcharts.com/demo/bar-basic

です。このクラスには、追加する必要がある値が含まれています。すなわちtspanの[2]

を私はこのDOM要素は、同様に、私は別のクラス茶色と緑の色を持っている長さ

document.getElementsByClassName("highcharts-label highcharts-data-label highcharts-data-label-color-0") 

<g class="highcharts-data-labels highcharts-series-0 highcharts-bar-series highcharts-color-0 highcharts-tracker " transform="translate(68,73) scale(1 1)" opacity="1"> 
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 " transform="translate(17,2)" opacity="0" visibility="hidden"> 
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16"> 
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">107</tspan> 
<tspan x="5" y="16">107</tspan> 
</text> 
</g> 
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 " transform="translate(5,54)"> 
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16"> 
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">31</tspan> 
<tspan x="5" y="16">31</tspan> 
</text> 
</g> 
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 " transform="translate(102,106)"> 
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16"> 
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">635</tspan> 
<tspan x="5" y="16">635</tspan> 
</text> 
</g> 
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 " transform="translate(33,158)"> 
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16"> 
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">203</tspan> 
<tspan x="5" y="16">203</tspan> 
</text> 
</g> 
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 " transform="translate(0,211)"> 
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16"> 
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">2</tspan> 
<tspan x="5" y="16">2</tspan> 
</text> 
</g> 
</g> 

として私に5を返すことがわかりました。私は親クラスを使用して、子要素に横断んどうすればよい HTMLは

<g class="highcharts-data-labels highcharts-series-1 highcharts-bar-series highcharts-color-1 highcharts-tracker " transform="translate(68,73) scale(1 1)" opacity="1"> 
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-1 " transform="translate(21,12)"> 
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16"> 
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">133</tspan> 
<tspan x="5" y="16">133</tspan> 
</text> 
</g> 
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-1 " transform="translate(25,64)"> 
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16"> 
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">156</tspan> 
<tspan x="5" y="16">156</tspan> 
</text> 
</g> 
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-1 " transform="translate(152,117)"> 
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16"> 
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">947</tspan> 
<tspan x="5" y="16">947</tspan> 
</text> 
</g> 
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-1 " transform="translate(65,169)"> 
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16"> 
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">408</tspan> 
<tspan x="5" y="16">408</tspan> 
</text> 
</g> 
<g class="highcharts-label highcharts-data-label highcharts-data-label-color-1 " transform="translate(1,221)" opacity="0" visibility="hidden"> 
<text x="5" style="font-size:11px;font-weight:bold;color:#000000;fill:#000000;" y="16"> 
<tspan class="highcharts-text-outline" x="5" y="16" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round">6</tspan> 
<tspan x="5" y="16">6</tspan> 
</text> 
</g> 
</g> 

のですか？ と方法がありますか？

Answer 1

あなたは私がのTextContentと一緒に要素を使用し、以下の

document.getElementsByClassName("highcharts-label highcharts-data-label highcharts-data-label-color-0")[0].getElementsByTagName("tspan")[1]