Lets say I go to - https://www.expedia.co.uk/ I go to Trains Tab and do a search for any date with 1 passenger selected.
You'll be on next page where to select trains from a list, now if I want to click on any ShowFares button its not being recognized uniquely by CSS= .btn-secondary.btn-action (its returning more than one matching node. So couldn't use it.
while using xpath -
.//*[@id='ember968']/div/div[1]/div[2]/div[2]/div/button
I see its recording @id with some emberxxx which again is not unique as its getting changed for every other search list..
Similarly when I clicked on ShowFare then unable to pick a train or fare as same above problem occurring as CSS is returning several nodes and xpath has this emberxxx which is not unique.
As with the same attributes, we have more than one element we are not able to pick right one. I tried with jquery selector .btn-secondary.btn-action:eq(1) and it is working. By using above selector you will pick first Show Fares button every time Let me know if you have any queries.
CSS Selector: .flex-1up.flex-listing.flex-theme-light li:nth-child(1) button