Kevin Kevin - 5 months ago 9
Javascript Question

Click on Spin in Protractor

<hs-details-item ng-repeat="item in amenities" style="overflow:hidden" class="ng-scope">
<hs-label class="ng-binding">Coca-Cola</hs-label>
<hs-value-block>
<hs>
<hs-spin ng-class="{'disabled': isAmenityPosting}" spin- ontrol="{changeCallback:setQuantity, value: item.quantity, min:0, params: item.amenity_id, title:'Quantity'}"><span class="disabled">-</span><span>+</span>
<!--<span hs-placeholder="0" localize="{data: item.quantity > 0 ? item.quantity:null, format: 'int', operation:'text'}"></span>-->
<span localize="{data: item.quantity, format: 'int', operation:'text'}">0</span>
</hs-spin>
</hs>
</hs-value-block>
</hs-details-item>


Scenario: I need to click on a spin which is a “+” button which in turns increment numbers every time is clicked.
Challenge: I have 10 spins for different items. How can I make my code unique so it would click on the right spin? I can see the names of the items are unique (water, Coca Cola,….) but those are not the one being clicked. Any idea how I can do this in Protractor? The following Snippet code is one example which is used to increment the number of Coca Cola once the spin is clicked. When I select my element which is a “+” button it would refer to the following coed which has notting unique about it:

<hs-spin ng-class="{'disabled': isAmenityPosting}" spin- ontrol="{changeCallback:setQuantity, value: item.quantity, min:0, params: item.amenity_id, title:'Quantity'}"><

Answer

With minor change to alecxe's suggestion I made this to work and was able to click "+" button:

element(by.xpath("//hs-details-item[hs-label='Coca-Cola']//hs-spin/span[2]")).click();
Comments