如何使用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.
}