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"（这是一个＆＃39;添加项目＆＃39;按钮，带有符号＆＃34; +＆＃34;显示在UI上）。目前我已经编写了以下css选择器，它似乎工作正常。

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

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

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

如果使用ng-scope不是一个好方法那么可能是另一种方式？是否有基于角度的应用程序定位元素的一般建议？

Answer 1

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

这绝对是真的。 ng-scope本身不是依赖你的定位器的好选择。同样适用于＆＃34; glyphicon＆＃34;和＆＃34; glyphicon-plus＆＃34;这是UI风格特定的定位器，而不是＆＃34;数据驱动＆＃34;。

我会使用以下定位器：

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

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

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

1 个答案: