I am having issue in my cypress where I am trying to click on a second button that is not disabled or selected already. What is happening currently is that it is selecting the already selected button and I am not sure why this is.
Here is a html example, so if you look at the code below, there are two divs which each handle a selection row. Within each row is a button (<a> link).
So what happens is that if a button is selected, the class selected is added onto the <a> element like so:
<a id="event-selection-4191929065" eventid="event-selection-19976412" title="Ronaldo to score 2 or more goals" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link selected" "="">
That's why I have the check to make sure we go through each odds button element and if it does not contain the .selected class.
Can anyone see what I am doing wrong and how to fix this?
This one can be simplified, because you already check class .button__bet inside oddsButton method.
oddsSelectionElements.oddsButton()
.each((element, index) => {
if (!element.hasClass("disabled") && !element.hasClass("selected")) {
cy.wrap(element).click()
return false
}
})
Sorry, it needs && between the two class checks because each check is ! (not).
disabled is usually an attribute, which would be checked like this
oddsSelectionElements.oddsButton()
.each((element, index) => {
if (!element.attr("disabled") && !element.hasClass("selected")) {
cy.wrap(element).click()
return false
}
})
Tested with this HTML fragment
<button class="oddsBoostedPrice button__bet eventSelection--link selected"></button>
<button class="oddsBoostedPrice button__bet eventSelection--link" disabled></button>
<button class="oddsBoostedPrice button__bet eventSelection--link"></button>
Only the 3rd button passes into the if() statement.
You can try changing your if condition to something like this:
oddsSelectionElements.oddsButton().each((element, index) => {
if (!element.prop("disabled") && !element.hasClass("selected")) {
cy.wrap(element).click()
return false
}
})