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

然后您可以通过以下方式获取 'frequently' 栏元素：

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# 从条形图中提取值

How to pull value from bar chart using Selenium Webdriver c#

c#

webdriver

selenium-webdriver