在 vue-test-utils 中查找第 n 个元素
Find the nth element in vue-test-utils
我正在开玩笑地使用 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>
我认为 wrapper.find('input:nth-of-type(3)') 不起作用的原因是您的输入不是具有同一父项的兄弟姐妹。 wrapper.findAll('input').at(3) 起作用的原因是因为它遍历整个 DOM 以查找输入并创建一个数组，从中获取第三个元素
我正在开玩笑地使用 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>
我认为 wrapper.find('input:nth-of-type(3)') 不起作用的原因是您的输入不是具有同一父项的兄弟姐妹。 wrapper.findAll('input').at(3) 起作用的原因是因为它遍历整个 DOM 以查找输入并创建一个数组，从中获取第三个元素