Cucumber 焦点 md-list-item

Question

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

我试着给了一个id，但是Cucumber好像找不到这个元素。

Answer 1

我发现我们可以将 class 名称动态添加到自动生成的 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>

如果您使用 Cucumber 脚本来聚焦 md-list-item，它将不起作用，因为 Angular Material 将动态生成可点击按钮。我们需要给这些按钮 class 命名，让 Cucumber 脚本关注它们。因此，我们绑定数据后，我们可以使用blow代码给class name:

$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，黄瓜可以聚焦这些按钮。

Cucumber 焦点 md-list-item

Cucumber focus md-list-item

javascript

cucumber

angularjs

angular-material