Reputation: 4334
I have a table below that displays different odds:
What happens is that the user will select an odds button to add their selection to a bet slip. However, what I need to do is select the correct button. What I mean by that is that it needs to select the first avilable odds button, not to select an odds button that is disabled or already selected.
So the my logic is this:
Currently this is my code but I don't think it's 100% correct, it is selecting an odds button but not sure if it will do the check if the button is disabled or selected in the row. At the moment it is selecting the first odds button but that's because none of the buttons are currently selected or disabled (and it's a live site so no way to manipulate the site to fit the scenario).
Here is the HTML that matches the image above:
<div class="featuredOutright__content featuredOutright__content--primary">
<ul class="featuredOutright__markets">
<li id="betBundle__4192262052__wrapper" class="featuredOutright__selection">
<div class="marketsList__image" id="betBundle__4192262052__sportIcon">
<i class="icon-football"></i>
</div>
<div class="marketsList__detail">
<i class="icon-shape icon-shape--rhombus icon-odds-boost"></i>
<div class="marketsList__market__title" id="betBundle__4192262052__marketTitle">
Club Brugge KV to score over 0.5 goals in each half
<a class="marketsList__market__matchName textLink" href="#/soccer/event/20213522" id="betBundle__4192262052__eventLink">
Club Brugge KV - KV Oostende
</a>
</div>
</div>
<div class="marketsList__was">
<p class="marketsList__was-amount strikethrough--horizontal" id="betBundle__4192262052__previousPrice">
5/6
</p>
</div>
<div class="marketsList__amount selectionBlock">
<a id="event-selection-4192262052" eventid="event-selection-20213522" title="Club Brugge KV to score over 0.5 goals in each half" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link" "="">
<i class="icon-tick"></i>
<em class="button__bet__odds">10/11</em>
<div class="button__bet--action" data-textadded="Added" data-textremoved="Removed"></div>
</a>
</div>
</li>
<li id="betBundle__4192270554__wrapper" class="featuredOutright__selection">
<div class="marketsList__image" id="betBundle__4192270554__sportIcon">
<i class="icon-football"></i>
</div>
<div class="marketsList__detail">
<i class="icon-shape icon-shape--rhombus icon-odds-boost"></i>
<div class="marketsList__market__title" id="betBundle__4192270554__marketTitle">
US Lecce to score over 0.5 goals in each half
<a class="marketsList__market__matchName textLink" href="#/soccer/event/20213510" id="betBundle__4192270554__eventLink">
Benevento - Lecce
</a>
</div>
</div>
<div class="marketsList__was">
<p class="marketsList__was-amount strikethrough--horizontal" id="betBundle__4192270554__previousPrice">
3/1
</p>
</div>
<div class="marketsList__amount selectionBlock">
<a id="event-selection-4192270554" eventid="event-selection-20213510" title="US Lecce to score over 0.5 goals in each half" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link" "="">
<i class="icon-tick"></i>
<em class="button__bet__odds">10/3</em>
<div class="button__bet--action" data-textadded="Added" data-textremoved="Removed"></div>
</a>
</div>
</li>
<li id="betBundle__4196565633__wrapper" class="featuredOutright__selection">
<div class="marketsList__image" id="betBundle__4196565633__sportIcon">
<i class="icon-tennis"></i>
</div>
<div class="marketsList__detail">
<i class="icon-shape icon-shape--rhombus icon-odds-boost"></i>
<div class="marketsList__market__title" id="betBundle__4196565633__marketTitle">
A Zverev and F Auger Aliassime to win the first set of the match
<a class="marketsList__market__matchName textLink" href="#/tennis/outrights/20405610" id="betBundle__4196565633__eventLink">
Odds Boost - Tennis
</a>
</div>
</div>
<div class="marketsList__was">
<p class="marketsList__was-amount strikethrough--horizontal" id="betBundle__4196565633__previousPrice">
7/1
</p>
</div>
<div class="marketsList__amount selectionBlock">
<a id="event-selection-4196565633" eventid="event-selection-20405610" title="A Zverev and F Auger Aliassime to win the first set of the match" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link" "="">
<i class="icon-tick"></i>
<em class="button__bet__odds">9/1</em>
<div class="button__bet--action" data-textadded="Added" data-textremoved="Removed"></div>
</a>
</div>
</li>
</ul>
</div>
Here is my step definition and elements class:
import { Given, When, Then } from "cypress-cucumber-preprocessor/steps";
import OddsSelectionElements from '../elements/oddsSelectionElements';
const oddsSelectionElements = new OddsSelectionElements();
When ("User selects an available bet bundle selection", () => {
oddsSelectionElements.featuredSelectionRow()
.within(() => {
oddsSelectionElements.oddsButton().first().not(".disabled");
oddsSelectionElements.oddsButton().first().not(".selected");
oddsSelectionElements.marketListTitle().first().invoke("text").as("betBundleTitle");
oddsSelectionElements.oddsButton().first().click();
})
})
OddsSelectionElements:
class OddsSelectionElements {
oddsButton() {
return cy.get('.button__bet__odds')
}
featuredSelectionRow() {
return cy.get('.featuredOutright__selection')
}
marketListTitle() {
return cy.get('.marketsList__market__title')
}
}
export default OddsSelectionElements
Example of button selected: it adds selected
in class for the <a>
tag
<a id="event-selection-4192270554" eventid="event-selection-20213510" title="US Lecce to score over 0.5 goals in each half" eventmodule="ODDS_BOOSTS_HOMEPAGE" class="oddsBoostedPrice button__bet eventSelection--link selected" "="">
disabled is same concept as above but instead of selected
will add disabled
Upvotes: 1
Views: 816
Reputation: 18565
Assuming not(".disabled")
and .not(".selected")
works above, you can write something like this:
cy.get(".button__bet__odds").each(($ele, index) => {
if ($ele.not(":disabled") && $ele.not(":selected")) {
cy.get("marketsList__market__title").eq(index).invoke("text").as("someText")
cy.wrap($ele).click()
return false
}
})
//Access someText
cy.get("@someText").then((someText) => {
cy.log(someText) //Access someText here
})
Upvotes: 1