How to select an element inside of Angular ng-repeat


#1

How would you select an element produced by angular ng-repeat when any reliable selectors are the same across the elements?

				<!-- ngRepeat: offer in decision.offerList track by offer.term --><label class="input-box check small-font ng-binding ng-scope" style="min-width:32%; max-width: 32%;display: inline-block !important;" ng-repeat="offer in decision.offerList track by offer.term">
					<input type="checkbox" ng-model="offer.isActive" class="ng-valid ng-dirty ng-valid-parse ng-touched ng-empty" style=""><div class="click-box"></div>
					7 Month - $5,000 ($48&nbsp;payment)
				</label><!-- end ngRepeat: offer in decision.offerList track by offer.term --><label class="input-box check small-font ng-binding ng-scope" style="min-width:32%; max-width: 32%;display: inline-block !important;" ng-repeat="offer in decision.offerList track by offer.term">
					<input type="checkbox" ng-model="offer.isActive" class="ng-pristine ng-untouched ng-valid ng-empty"><div class="click-box"></div>
					8 Month - $5,500 ($46&nbsp;payment)
				</label><!-- end ngRepeat: offer in decision.offerList track by offer.term --><label class="input-box check small-font ng-binding ng-scope" style="min-width:32%; max-width: 32%;display: inline-block !important;" ng-repeat="offer in decision.offerList track by offer.term">
					<input type="checkbox" ng-model="offer.isActive" class="ng-pristine ng-untouched ng-valid ng-empty"><div class="click-box"></div>
					9 Month - $6,000 ($45&nbsp;payment)
				</label><!-- end ngRepeat: offer in decision.offerList track by offer.term --><label class="input-box check small-font ng-binding ng-scope" style="min-width:32%; max-width: 32%;display: inline-block !important;" ng-repeat="offer in decision.offerList track by offer.term">
					<input type="checkbox" ng-model="offer.isActive" class="ng-pristine ng-untouched ng-valid ng-empty"><div class="click-box"></div>
					10 Month - $6,500 ($46&nbsp;payment)
				</label><!-- end ngRepeat: offer in decision.offerList track by offer.term -->
			</div>

I was trying to play around with cssSelectors and could not even get a basic example to work. I am assuming something to this effect should work:

label[ng-repeat=‘offer in decision.offerList track by offer.term’]:nth-child(2) input[ng-model=‘offer.isActive’]

If I wanted to select the 2nd input element from this group


#2

Katalon doesn’t know (or care) about Angular or ng-any-damn-thing. Katalon cares about HTML elements and TestObjects.

To get help with your problem, post the underlying HTML at issue. To help you do that, follow this advice:


#3

Thanks for the advice. This is my first post and didnt see the preview pane to make sure my post had the accurate information!


#4

We have been using Parameterized Test Objects to handle this kind of situation. To do this, using your example, you need to know how to identify the parent DIV that surrounds the labels. For example, suppose the DIV can be identified with xpath:

//div/[@id='offers']

Then you would define a test object for your label as follows:

//div/[@id='offers']/label[${index}]

Notice the parameter ${index}. You can use any name for the parameter, but we tend to use index as the name. And suppose you name your test object “OfferByIndex”.

Then in your test script to find the third label you would use:
findTestObject('OfferByIndex', [('index') : 3])

Katalon will replace ${index} with 3, resulting in the xpath of:

//div/[@id='offers']/label[3]

See more about parameterized test objects here:


Good luck!