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

Question

我正在使用 vue-test-utils 和 jest。\n我的包装器包含 9 个输入元素，我想获取第三个。\n此解决方案有效：

\n\n

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

\n\n

根据文档（https://vue-test-utils.vuejs.org/api/selectors.html），我应该能够使用CSS伪选择器，但这不起作用：

\n\n

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

\n\n

使用这种方法，我只能获取第一个输入：

\n\n

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

\n\n

我是否误用了 CSS 选择器？

\n\n

我的包装 HTML 如下所示：

\n\n

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

\n

Answer 1

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