如何使用Selenium Webdriver c從條形圖中提取數值＃

Question

我的目標是使用Selenium驗證此條形圖中的值。

我一直無法使用Selenium查找圖表值。不知道我是否應該使用XPath或CssSelector。

圖表中有三個條，頻繁，有時和從不。當前有圖表中的值如下所示：

常見：2

有時：1

很少：0

我能看到值和標籤在頁源中的每個條，但在C＃中找不到使用Selenium Webdriver的元素。

<div class="results-chart"> 
    <div class="chart-bar-container"> 
     <div class="chart-bar green" ng-style="{'height': graph.Frequently.patientPercent}" ng-hide="graph.Frequently.patient == 0" style="height: 193.333px;"> 
     <div class="chart-background"></div> 
     <div class="chart-main"> 
     <div class="chart-value ng-binding">2</div> 
     </div> 
     </div> 
     <div class="chart-bar orange ng-hide" ng-style="{'height': graph.Frequently.companionPercent}" ng-hide="graph.Frequently.companion == 0"> 
     <div class="chart-background"></div> 
     <div class="chart-main"> 
     </div> 
     <div class="chart-bar-description">Frequently</div> 
    </div> 
    <div class="chart-bar-container"> 
     <div class="chart-bar green" ng-style="{'height': graph.Sometimes.patientPercent}" ng-hide="graph.Sometimes.patient == 0" style="height: 96.6667px;"> 
     <div class="chart-background"></div> 
     <div class="chart-main"> 
     <div class="chart-value ng-binding">1</div> 
     </div> 
     </div> 
     <div class="chart-bar orange ng-hide" ng-style="{'height': graph.Sometimes.companionPercent}" ng-hide="graph.Sometimes.companion == 0"> 
     <div class="chart-background"></div> 
     <div class="chart-main"> 
     <div class="chart-value ng-binding">0</div> 
     </div> 
     </div> 
     <div class="chart-bar-description">Sometimes</div> 
    </div> 
    <div class="chart-bar-container"> 
     <div class="chart-bar green ng-hide" ng-style="{'height': graph.Rarely.patientPercent}" ng-hide="graph.Rarely.patient == 0"> 
     <div class="chart-background"></div> 
     <div class="chart-main"> 
     <div class="chart-value ng-binding">0</div> 
     </div> 
     </div> 
     <div class="chart-bar orange ng-hide" ng-style="{'height': graph.Rarely.companionPercent}" ng-hide="graph.Rarely.companion == 0"> 
     <div class="chart-background"></div> 
     <div class="chart-main"> 
     </div> 
     <div class="chart-bar-description">Rarely</div> 
    </div> 
</div> 

我找到了一種方法找到的結果，但它僅適用，因爲我知道，結果總是小於10。我希望能學到更好的方式來做到這一點，這種方法似乎很脆弱。

 public static string CheckFrequently() 
     { 
      var frequently = Driver.Instance.FindElements(By.ClassName("chart-bar-container")); 
      string result = frequently[0].Text.Substring(0, 1); 
      return result; 
     } 

Answer 1

這可能是更好的改變你的HTML，包括ID，以使事情唯一可識別的如：

<div id="frequently-container" class="chart-bar-container"> 
    ... 
</div> 

然後，您可以通過做得到「經常」欄元素：

var element = browser.FindElement(By.Id("frequently-container")).FindElement(By.ClassName("chart-value ng-binding")); 

其他我會馬上找到所有的元素並迭代它們。

// Find all the bar chart value divs. 
var chartValues = browser.FindElements(By.ClassName("chart-value ng-binding")); 

foreach(var e in chartValues) 
{ 
    var value = Int32.Parse(e.GetText()); // Get barchart value. 
}