css - 在 vue-test-utils 中查找第 n 个元素

Question

我正在 Jest 使用 vue-test-utils。我的包装器包含 9 个输入元素，我想获得第三个。此解决方案有效:

    wrapper.findAll('input').at(3) // OK

根据文档(https://vue-test-utils.vuejs.org/api/selectors.html)，我应该可以使用 CSS 伪选择器，但这不起作用:

    wrapper.find('input:nth-of-type(3)') // ErrorWrapper

用这个方法，我只能得到第一个输入:

    wrapper.find('input:nth-of-type(1)') // OK

我是否滥用了 CSS 选择器？

我的包装器 HTML 如下所示:

<div class="layout wrap">
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon fa fa-user theme--light"></i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Nom*</label><input aria-label="Nom*" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon fa fa-user theme--light"></i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Prénom*</label><input aria-label="Prénom*" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon fa fa-at theme--light"></i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Email*</label><input aria-label="Email*" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> 
      <div>
         <div class="v-menu">
            <div class="v-menu__content theme--light " style="max-height: auto; min-width: 290px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"></div>
         </div>
         <div class="v-input v-text-field theme--light">
            <div class="v-input__prepend-outer">
               <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon v-icon--link material-icons theme--light">event</i></div>
            </div>
            <div class="v-input__control">
               <div class="v-input__slot">
                  <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Date de naissance</label><input aria-label="Date de naissance" type="text"></div>
               </div>
               <div class="v-text-field__details">
                  <div class="v-messages theme--light">
                     <div class="v-messages__wrapper"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!---->
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon material-icons theme--light">place</i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Adresse</label><input aria-label="Adresse" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Code postal</label><input aria-label="Code postal" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Ville</label><input aria-label="Ville" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon material-icons theme--light">smartphone</i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Numéro de téléphone</label><input aria-label="Numéro de téléphone" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon fa fa-globe-europe theme--light"></i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Nationalité</label><input aria-label="Nationalité" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

我认为 wrapper.find('input:nth-of-type(3)') 不起作用的原因是您的输入不是具有同一父项的 sibling 。 wrapper.findAll('input').at(3) 起作用的原因是因为它遍历整个 DOM 以查找输入并创建一个数组，从中获取第三个元素