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

我们有一个小型angularJs应用程序，我想利用当前的SeleniumWebDriver java testNG框架编写一些自动化测试脚本。我担心编写可靠的定位器是角度应用程序的新手。以下是示例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>

是否有更好/更可靠的方法来定位该元件

通过与团队成员（开发人员）交谈和一些在线研究（包括查看有关StackOverflow的其他问题和反馈），我认为使用

class=“item ng scope active”

查找元素可能不是一个好方法。我还意识到使用量角器javascript可能是测试angular应用程序的更好的堆栈选择，但我目前的工作范围是使用SeleniumJavaTestNG

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

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

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

我将使用以下定位器：

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

---

我已经删除了

ng范围

类检查，因为您不必检查所有类-

项

和

活动项

足以包含在选择器中。然后，我们正在寻找

按钮

元素，该元素具有以

addPlan

开头的

ng click

属性。这不仅与按钮唯一匹配，而且可读性强，切中要害。

谢谢@alecxe。接下来的一个问题是，html中也使用了

class=“ng binding”

。这可以用来编写定位器吗？或者按照您的建议，我应该寻找替代定位器吗？@AGill

ng binding

类似于

ng scope

，在某种程度上，它不是一个好的类来依赖定位器。通常，如果存在

ng binding

类，您可能会使用

by.binding（）

定位技术来定位元素。很乐意帮忙。

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