How to select elements based on conditions in cypress/javascript

Question

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:

Look in the odds table you see in the image and in the table row, check within to see if the button is not disabled and not selected.
If the above is true, then take the name of the selection and store it as an alias and then click on that odds button.

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:


   
      
         
            
         
         
            
            
               Club Brugge KV to score over 0.5 goals in each half
               
               Club Brugge KV - KV Oostende
               
            
         
         
            
               5/6
            
         
         
            
               
               10/11
               
            
         
      
      
         
            
         
         
            
            
               US Lecce to score over 0.5 goals in each half
               
               Benevento - Lecce
               
            
         
         
            
               3/1
            
         
         
            
               
               10/3
               
            
         
      
      
         
            
         
         
            
            
               A Zverev and F Auger Aliassime to win the first set of the match
               
               Odds Boost - Tennis
               
            
         
         
            
               7/1
            
         
         
            
               
               9/1

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 tag

disabled is same concept as above but instead of selected will add disabled

Alapan Das · Accepted Answer

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
})

How to select elements based on conditions in cypress/javascript

Answers (1)

Related Questions