Как установить флажки с одинаковыми веб-элементами в транспортире

Question

Я пытаюсь написать автоматизированный скрипт для тестирования E2E, используя транспортир + жасмин.Но, пораженный моментом выбора флажка, где все веб-элементы одинаковы для всех трех флажков.Я хочу установить второй флажок.

Может кто-нибудь помочь мне с этим вопросом, пожалуйста?Ниже приведен фрагмент кода Angular JS для справки.

Даже значения xpath и CSSSelector не помогли, поскольку они также были одинаковыми.

CSSSelector: #checks xpath: // *[@ id = "check"]

Единственный тег, в котором я вижу разницу, это [class = "ng-binding"].

Фрагмент:

<tr x-ng-repeat="productOffering in allProductList" class="prod-input-select ng-scope">
<td>
<input ng-show="productOffering.added == 'N'" name="checks" id="checks" type="checkbox" ng-click="addTempProductToBeAdded($event,productOffering)" ng-model="productOffering.isSelected" class="ng-pristine ng-valid">
</td>
<td class="ng-binding">
Product1
</td>
</tr>
<tr x-ng-repeat="productOffering in allProductList" class="prod-input-select ng-scope">
<td>
<input ng-show="productOffering.added == 'N'" name="checks" id="checks" type="checkbox" ng-click="addTempProductToBeAdded($event,productOffering)" ng-model="productOffering.isSelected" class="ng-pristine ng-valid">
</td>
<td class="ng-binding">
Product2
</td>
</tr>
<tr x-ng-repeat="productOffering in allProductList" class="prod-input-select ng-scope">
<td>
<input ng-show="productOffering.added == 'N'" name="checks" id="checks" type="checkbox" ng-click="addTempProductToBeAdded($event,productOffering)" ng-model="productOffering.isSelected" class="ng-pristine ng-valid">
</td>
<td class="ng-binding">
Product3
</td>
</tr>

Ура, Ашиш

Answer 1

Как отметил Тони в комментарии, вы не можете иметь более одного элемента с одинаковым id в DOM.В идеале вам нужно это исправить.

Теперь давайте предположим, что его не в ваших руках, чтобы исправить это, вы все равно можете использовать селектор ниже, чтобы установить второй флажок

element.all(by.css(input[name="checks"]))[1] или element.all(by.css(input[name="checks"])).get(1)

Пожалуйста, проверьте, какой из них работает для вас.

Answer 2

Я думаю, что вы должны изменить идентификаторы, чтобы различать ваши чеки

<tr x-ng-repeat="productOffering in allProductList" class="prod-input-select ng-scope">
    <td>
    <input ng-show="productOffering.added == 'N'" name="checks" id="checks-0-{{$index}}" type="checkbox" ng-click="addTempProductToBeAdded($event,productOffering)" ng-model="productOffering.isSelected" class="ng-pristine ng-valid">
    </td>
    <td class="ng-binding">
    Product1
    </td>
</tr>
<tr x-ng-repeat="productOffering in allProductList" class="prod-input-select ng-scope">
    <td>
    <input ng-show="productOffering.added == 'N'" name="checks" id="checks-1-{{$index}}" type="checkbox" ng-click="addTempProductToBeAdded($event,productOffering)" ng-model="productOffering.isSelected" class="ng-pristine ng-valid">
    </td>
    <td class="ng-binding">
    Product2
    </td>
</tr>
<tr x-ng-repeat="productOffering in allProductList" class="prod-input-select ng-scope">
    <td>
    <input ng-show="productOffering.added == 'N'" name="checks" id="checks-2-{{$index}}" type="checkbox" ng-click="addTempProductToBeAdded($event,productOffering)" ng-model="productOffering.isSelected" class="ng-pristine ng-valid">
    </td>
    <td class="ng-binding">
    Product3
    </td>
</tr>

И, возможно, вы можете попробовать использовать селектор

CSSSelector: [id^="checks"]

xpath: //*[starts-with(@id,'checks')][@type="checkbox" and (@checked)]