基于 Angular 的应用程序的定位器（CSS 选择器或 xPATH）

Question

我们有一个小型 angularJs 应用程序，我想利用当前的 SeleniumWebDriver-java-testNG 框架编写一些自动化测试脚本。我担心编写可靠的定位器是 Angular 应用程序的新手。以下是示例html代码：

<div class="item  ng-scope active" ng-class="$index===0 ? 'active' : ''" ng-repeat="plan in Plans">
        <section class="container">
            <div class="card" ng-class="{'flipped':isFlipped}" ng-click="isFlipped =! isFlipped">
                <div class="back">
                    <div class="row">
                        <div class="col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10" id="restore-title">
                            <span class="ng-binding">Basic Subscription</span>
                            </div>
                        </div>
                    <div class="row">
                        <div class=" col-xs-2 col-sm-2 col-md-2 col-lg-2 restoreImg">
                            <img class="img-responsive" src="../assets/images/restore_black.png">
                        </div>
                        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 restore">

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10 disclaimer">

                        </div>
                    </div>

                </div>
            </div>
        </section>
        <!--<section class="planBtn-wrapper">-->
            <!--<div class="row planBtn">-->
                <!--<div class="col-xs-5 minusBtn">-->
                    <!--&lt;!&ndash;<button type="button" class="btn btn-default btn-circle btn-lg" style="border: 5px solid gainsboro" ng-click="removePlan()"><i class="glyphicon glyphicon-minus"></i></button>&ndash;&gt;-->
                    <!--<button type="button" class="btn btn-default btn-circle btn-lg"-->
                            <!--ng-click="removePlan(plan,$index)">-->
                        <!--<i class="glyphicon glyphicon-minus"></i>-->
                    <!--</button>-->
                <!--</div>-->
                <!--<div class="col-xs-2 textPlan">-->
                    <!--<span>{{order.plan[$index].count}}</span>-->
                <!--</div>-->
                <!--<div class="col-xs-5 plusBtn">-->
                    <!--<button type="button" class="btn btn-default btn-circle btn-lg" ng-click="addPlan(plan,$index)">-->
                        <!--<i class="glyphicon glyphicon-plus"></i></button>-->
        <div class="row">
            <div class="col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10">
                <div class="row planBtn">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 minusBtn">
                        <!--<button type="button" class="btn btn-default btn-circle btn-lg" style="border: 5px solid gainsboro" ng-click="removePlan()"><i class="glyphicon glyphicon-minus"></i></button>-->
                        <button type="button" class="btn btn-default btn-circle btn-lg center-block" ng-click="removePlan(plan,$index)">
                            <i class="glyphicon glyphicon-minus"></i>
                        </button>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 textPlan">
                        <span class="ng-binding">0</span>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 plusBtn">
                        <button type="button" class="btn btn-default btn-circle btn-lg" ng-click="addPlan(plan,$index)">
                            <i class="glyphicon glyphicon-plus"></i></button>
                    </div>
                </div>
            </div>
        </div>

    </div>

在这里，我想为按钮编写一个定位器：i class="glyphicon glyphicon-plus"（这是一个“添加项目”按钮，在 UI 上显示符号“+”）。目前我已经编写了以下 css 选择器，它似乎工作正常。

By.cssSelector("div.item.ng-scope.active i[class='glyphicon glyphicon-plus']")

1. 是否有更好/更可靠的方法来定位此元素？

通过与团队成员（开发人员）交谈并进行一些在线研究（包括查看有关 StackOverflow 的其他问题和反馈），我认为使用 class="item ng-scope active" 定位元素可能不是一个好方法。我还意识到使用 protractor-javascript 可能是测试 Angular 应用程序的更好堆栈选择，但我目前的范围是使用 selenium-java-testNG。

1. 如果使用 ng-scope 不是一个好方法，那么还有什么替代方法？对于基于角度的应用程序定位元素有什么一般性建议吗？

Answer 1

我认为使用 class="item ng-scope active" 来定位元素可能不是一个好方法

这绝对是真的。 ng-scope 本身并不是依赖定位器的好选择。 “glyphicon”和“glyphicon-plus”也是如此，它们是特定于 UI 样式的定位器，而不是“数据驱动”。

我会使用以下定位器：

div.item.active button[ng-click^=addPlan]

我删除了 ng-scope 类检查，因为您不必检查所有类 - item 和 active 足以包含在选择器中。然后，我们正在寻找具有以addPlan 开头的ng-click 属性的button 元素。这不仅会与按钮唯一匹配，而且可读性也很强。