How can I write if-else conditions in cypress according to element's value?

Question

How can I run this function, according to the value change of element with if-condition?

 assertSwitch(){
    
            cy.get('[data-test="form-switch"]').invoke('attr','value').then(($switchOnOff) =>{
                
            if($switchOnOff == true){
                    cy.isContain('.item-undefined-switch[data-test="item-undefined-email"]', 'true')
            }else{
                    cy.isContain('.item-undefined-switch[data-test="item-undefined-email"]', 'false')
                }
            })
        }

I don't quite understand what you're asking. You want to take the value of the `[data-test="form-switch"]` element and assert on the `[data-test="item-undefined-email"]` element? — agoff, Apr 07 '22 at 18:38
It would help if you could add the `isContain()` custom command code. — jjhelguero, Apr 07 '22 at 19:16

Fody · Answer 1 · 2022-04-07T23:09:34.000

1

The problem is both switches have the same data-test, so Cypress starts to get confused

cy.get('[data-test="form-switch"]')
  .eq(0)                              // pick one
  .invoke('attr','aria-checked')      // this attr indicates checked state
  .then(($switchOnOff) => {
                
    if($switchOnOff === 'true') {  // note adjustments here

      cy.isContain('.item-undefined-switch[data-test="item-undefined-email"]', 'true')  
    } else {
      cy.isContain('.item-undefined-switch[data-test="item-undefined-email"]', 'false')
    }
})

Or all switches

cy.get('[data-test="form-switch"]')
  .each(($switchOnOff) => {
    const value = $switchOnOff.attr('aria-checked')
    cy.isContain('.item-undefined-switch[data-test="item-undefined-email"]', value)  
})

edited Apr 07 '22 at 23:09

answered Apr 07 '22 at 20:20

Fody

23,754
3
20
37

First script always enters in else part. Second script result: expected '' to contain undefined – Solufer Apr 07 '22 at 21:47
It's because the ant-d switch doesn't set value when toggled. You can use `aria-checked` or class `ant-switch-checked` - both change of toggle. – Fody Apr 07 '22 at 23:07
the same results for both. – Solufer Apr 08 '22 at 09:55
You should double-check, it works for me. – Fody Apr 08 '22 at 21:08

Alapan Das · Answer 2 · 2022-04-07T19:14:28.563

0

You can do something like this:

cy.get('[data-test="form-switch"]').then(($ele) => {
  if ($ele.attr('val') == 'true') {
    cy.get('button[data-test="form-switch-input"]').should(
      'have.attr',
      'aria-checked',
      'true'
    )
    //Add something here
  } else {
    cy.get('button[data-test="form-switch-input"]').should(
      'have.attr',
      'aria-checked',
      'false'
    )
    //Add something here
  }
})

edited Apr 07 '22 at 19:14

answered Apr 07 '22 at 18:57

Alapan Das

17,144
3
29
52

I tried, but says: "Timed out retrying after 4000ms: expected '' to have attribute 'aria-checked'" – Solufer Apr 07 '22 at 19:11

How can I write if-else conditions in cypress according to element's value?

2 Answers2