title: How to handle toggle in Cypress?
body: <p>*If toggle is enabled - need to fill up a form which shows up only after enable. If toggle is disabled - no need to look for form as it is hidden.</p>
  <p>I want to check whether the toggle is initially disabled or not and carry out next steps accordingly. If it is disabled, then 1st - I want to enable it and fill forms and hit Save, 2nd - leave it as it is and hit Skip.
  Similarly, if the toggle is initially enabled, I want to 1st - disable it and hit Skip, 2nd - leave it as it is, fill form fields and hit Save.
  What can I do in this situation?</p>
  <p>*Filling up form and Skip/Save is not a problem.</p>
  <p>Cypress code for Disable:</p>
  <pre><code>it('Disable', function () {
      cy.get('input[aria-label=&quot;primary checkbox&quot;]').then(($ele) =&gt; {
          if ($ele.is(':checked')) {
              $ele.check() // to disable if enabled
              
              cy.wait(1000)
              cy.xpath('/html/body/div[1]/div[1]/div/div/div/div[1]/div/div[2]/div[5]/div/div[2]/button')
              .click() // Skip
              
          } else {
              cy.wait(1000)cy.xpath('/html/body/div[1]/div[1]/div/div/div/div[1]/div/div[2]/div[5]/div/form/div[2]/button/span[1]')
                  .click() // Skip
          }
      })
  }) 
  </code></pre>
  <p>Cypress code for Enable:</p>
  <pre><code>it('Enable', function () {        
      cy.get('input[aria-label=&quot;primary checkbox&quot;]').then(($ele) =&gt; {
          if ($ele.is(':checked')) {
              cy.wait(1000)
              cy.get('form').within(($form) =&gt; {
                  cy.get('input').first().clear().type(8)
                  cy.get('input').eq(1).clear().type(4)
                  cy.get('input').last().clear().type(4)
              })
              cy.xpath('/html/body/div[1]/div[1]/div/div/div/div[1]/div/div[2]/div[5]/div/form/div[2]/button/span[1]')
              .click() // Save
          } else {
              $ele.check() // to enable if disabled
              
              cy.wait(1000)
              cy.get('form').within(($form) =&gt; {
                  cy.get('input').first().clear().type(8)
                  cy.get('input').eq(1).clear().type(4)
                  cy.get('input').last().clear().type(4)
              })cy.xpath('/html/body/div[1]/div[1]/div/div/div/div[1]/div/div[2]/div[5]/div/div[2]/button')
              .click() // Save
          }
      })
  })
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="MuiSwitch-root jss984"&gt;
   &lt;span class="MuiButtonBase-root MuiIconButton-root jss638 MuiSwitch-switchBase 
   MuiSwitch-colorPrimary" aria-disabled="false"&gt;
     &lt;span class="MuiIconButton-label"&gt;
         &lt;input class="jss641 MuiSwitch-input" name="checkedB" type="checkbox" 
         aria-label="primary checkbox" value=""&gt;
         &lt;span class="MuiSwitch-thumb"&gt;&lt;/span&gt;
     &lt;/span&gt;
     &lt;span class="MuiTouchRipple-root"&gt;&lt;/span&gt;
   &lt;/span&gt;&lt;span class="MuiSwitch-track"&gt;&lt;/span&gt;
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>