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

如何使用Selenium Webdriver c＃从条形图中提取值

1 个答案: