0

I'm just new to Cypress and I want to validate if the slide toggle button is ON or OFF. I have this piece of code that checks whether it is ON or OFF but I have no idea how to put it in an If-Else condition.

cy.get('#slide-toggle-1')
   .find('input')
   .filter('#slide-toggle-1')
   .should('have.attr', 'aria-checked', 'true')


//What I want to do
If(<the code above is true>) {
 cy.get('#dropdown').select('value1')
}
else {
 cy.get('#button').click()
}

All comments and suggestions are well appreciated. Thank you.

KangSolA
  • 1
  • 2
  • What you are trying to do is completely valid. However, I'd suggest that when you are writing a test, you should know/expect the state things are on & test against them. If your environment is in an unsure state, your tests will become difficult to write, maintain and troubleshoot. – olore May 08 '21 at 03:50

3 Answers3

0

You can use then, but it gets a bit messier when you have more levels of nesting

cy.get('#slide-toggle-1')
   .find('input')
   .filter('#slide-toggle-1')
   .then((btn)=>{
       if (btn.ariaChecked === 'true') {
           cy.get('#dropdown').select('value1')
       }
       else {
           cy.get('#button').click()
      }
   })

You should be able to use await with cypress-promise

import promisify from 'cypress-promise'

const btn = await promisify(
  cy.get('#slide-toggle-1')
    .find('input')
    .filter('#slide-toggle-1')
  );

if(btn.ariaChecked === 'true') 
if(btn[0].ariaChecked === 'true') // might need [0] as per @eric99's comment
Daniel
  • 34,125
  • 17
  • 102
  • 150
  • Cypress commands aren't promises, you can't await them - but they are thenable, so the 2nd example works. – Ackroydd May 07 '21 at 22:18
  • @Ackroydd, right. I updated answer with library that allows `await` – Daniel May 07 '21 at 23:45
  • Not quite correct yet, `const btn = await promisify()` returns a jQuery object, so you should index the object to get the raw element `if (btn[0].ariaChecked === 'true')`, or maybe there's a jQuery form of `.ariaChecked`. –  May 08 '21 at 00:38
0

You can use a jQuery OR selector

cy.get('#slide-toggle-1[aria-checked="true"], #button') // "," in the selector means OR
  .eq(0)                                                // if both present take the first
  .then(toggleOrButton => {
    if (toggleOrButton.attr('id') === 'slide-toggle-1') {
      cy.get('#dropdown').select('value1')
    } else {
      cy.get('#button').click()
    }
  })

Note this only works for static HTML. If you've just clicked the toggle and it's animating, it would pick the button before the animation completes (but the same applies to other methods using .then() or await).

0

I have already done this using the following code:

cy.get('#slide-toggle-1-input').then(($toggleBtn) => {
     if($toggleBtn.attr('aria-checked') === 'true') {
         //command here if the toggle button is turned on
     } 
     else {
         //command here if the toggle button is turned off
     }
})

Also don't use dynamic elements such as my example above, I just use that for easier understanding. Instead, use a regular expression or RegEx for the locators like below.

//example above, don't do this
cy.get('#slide-toggle-1-input')

//USE THIS for dynamic locators
cy.get("[id^='slide-toggle-'][id$='-input']").first()

//the ^ search for properties starting from
//the $ search for properties ending from

Read this for further details on the cy.get() and dynamic locators: https://docs.cypress.io/api/commands/get#Selector

Hope it helps everyone, especially who's just starting on Cypress like me! :)

KangSolA
  • 1
  • 2