[SOLVED] Validating the state of the slide toggle using Cypress

Validating the state of the slide toggle using Cypress

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.

Solution

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! :)