Question

我正在使用Angular Material创建一个网站，并使用Cucumber脚本进行测试。黄瓜有可能专注于？

我试图给出一个id，但似乎Cucumber找不到该元素。

Answer 1

我发现我们可以动态地将类名添加到自动生成的html标记中。

例如，您创建了如下列表：

<md-list flex>
    <md-list-item class="md-3-line tobe-reviewed-kudo-item" ng-repeat="kudo in kudos | filter : {kudosStatus: 'Pending'} | limitTo : 3" ng-click="toReviewKudo(kudo.kudosId)">
        <img ng-src="img/avatar.png" class="md-avatar" alt="{{item.who}}" />
        <div class="md-list-item-text" layout="column">
            <h3>{{kudo.chEmployeeByKudosSenderId}} sent {{kudo.chEmployeeByKudosReceiverId}}</h3>
            <p>{{kudo.createdOn}}</p>
        </div>
        <p>{{kudo.kudosStatus}}</p>
        <md-divider></md-divider>
    </md-list-item>
</md-list>

如果使用黄瓜脚本来聚焦md-list-item，它将无法工作，因为Angular Material将动态生成可点击按钮。我们需要给那些按钮类名，让黄瓜脚本专注于它们。因此，在我们绑定数据之后，我们可以使用blow代码来提供类名：

$scope.$watch("$viewContentLoaded", function() {
 var kudoItemsDOM = document.getElementsByClassName("tobe-reviewed-kudo-item");
 var kudoItems = angular.element(kudoItemsDOM);
 for(var i = 0; i < kudoItems.length; i++) {
 angular.element(kudoItems[i].querySelector(".md-ink-ripple")).addClass("kudo-item-btn");
 }
 });

然后，kudo-item-btn将被添加到html中，黄瓜可以聚焦这些按钮。

黄瓜焦点md-list-item

1 个答案: