I have numerous elements in my ui tests that have the same css selector name but the issue I'm have is how to select each of them separately.
I recall there was a way to add [1],[2] after each of them but i cant seem to make it work.
I'm currently using "[data-qa-inning-value]"[1], "[data-qa-inning-value]"[2], etc but it is not picking it up, any help?
It currently isn't picking anything up but I do remember there was a way to do it but I just cant find it in my notes
Ideally, you should not hardcode the element number like [1] or [2] with the CSS Selector. This is because, many times, the dev team keeps adding or removing classes and structures which affect the DOM and you would lose track of your hardcoded elements resulting you in false positives.
Try to find elements uniquely. If CssSelector isn't helping, try XPath but keep the elements unique.
However if you still decide to choose the current approach, following can help you
After the class/id or the identifier, put :nth-of-type(1) or :nth-of-type(2) and so on to get your elements.
For example:
.c-primary-navigation__load-nav-item:nth-of-type(5)
.data-qa-inning-value:nth-of-type(1). However, I am not sure if that is a class or id. Unless I see the DOM, can't say.