CODEWITHSUNDEEP
cypress
akshith
akshith

Reputation: 127

How to check the radio button is clickable or not in cypress

I need to check whether the radio button is clickable or not. In some scenarios this radio button is clickable but in some scenarios, the user is not able to click the radio button.

The cursor is not allowed in the not clickable scenario.

Can someone help me for this?

I have attached screenshots below.

I have tried many this but not worked.

checkSkipBtnClickable(){

    const checkSkipButton = cy.get(':nth-child(3) > .ant-radio-wrapper')
  

 }

Cursor is not allowed to click

Cursor is allowed to click

code

Upvotes: 2

Views: 599

Answers (2)

akshith
akshith

Reputation: 127

This is the answer I got:

cy.contains('h3', 'Skip')
      .parent()
      .then($el => $el.css('cursor') === 'not-allowed')
      .as('checkSkipButton')

      cy.get('@checkSkipButton').then(checkSkipButton => {
          if (checkSkipButton) {
            cy.log("Skip is not available")
          }
          else{
              cy.log("Skip is available")
          }
      })

Upvotes: 0

Fody
Fody

Reputation: 32052

This gives you a true/false value in an alias called checkSkipButton

cy.contains('h3', 'Skip')
  .parent()
  .then($el => $el.css('cursor') === 'not-allowed')
  .as('checkSkipButton')

cy.get('@checkSkipButton').then(checkSkipButton => {
  if (checkSkipButton) {
    ...
  }
})

Upvotes: 4

Related Questions