javascript - Cypress'te onay kutusunun işaretli olduğunu nasıl doğrulamalıyım?

Bir öğe üzerinde kutunun işaretli olup olmadığını görmek için doğrulama yapmaya çalışıyorum. Lütfen aşağıdaki görsele bakın:

Şimdi, bu elementi hedef almak için DOM yapısı şöyle:

<pds-radio class data-v-1234bb3c model="singleSelection" checked>
 #shadow-root (open)
 <div class="wrapper">
  <div class="radio-wrapper">
          <div class="radio-container">
                 <div class="radio active" tabindex="0">
                        ::before

Şu anda buna tıkladığımda, 'pds-radio' içinde bu 'checked' özniteliğini alıyorum ve gölgede sınıf class="radio active" oluyor; işaretlenmemişse class="radio" oluyor

Buna yardımınız için gerçekten minnettar olacağım. Teşekkürler

Cevap #1

.shadow()'ı gölge DOM'a erişmek için kullanabilirsiniz.

cy.get('pds-radio')
  .shadow()
  .find('.radio')
  .should('have.class', 'active')

Alternatif olarak, find komutuna includeShadowDom seçeneğini ekleyebilirsiniz.