Webdriver.io中链式选择器失效，无法获取第2、3个DOM元素

数据老陈

2026-5-28

解决:nth-child获取不到后续元素的问题

我之前也碰到过一模一样的情况，明明第一个元素能正常获取，后面的就返回null，大概率是选择器逻辑或者元素加载时机的问题，给你几个排查和解决的方向：

别搞混:nth-child和:nth-of-type的计数逻辑
:nth-child(2)是找父元素下的第2个子元素，不管它是不是.entry类型。比如如果父元素里第一个子元素是.entry，第二个是个其他类型的元素，那.entry:nth-child(2)就会找不到目标元素——因为第2个子元素根本不是.entry。这时候换用:nth-of-type(2)就对了，它是针对同标签类型的.entry元素计数，修改后的代码如下：
```
await browser.click('.entry:nth-of-type(2)');
```
确保后续元素已经完成加载
你现在只等待了.entry存在，但waitForExist默认只会等待第一个匹配的元素出现，第二个元素可能还在动态渲染中。所以最好单独等待第二个元素加载完成再点击：
```
const secondItem = '.entry:nth-child(2)';
await browser.waitForExist(secondItem);
await browser.click(secondItem);
```
检查元素的父容器层级
说不定这些.entry元素根本不是同一个父元素的直接子元素！比如每个.entry都嵌套在各自的<li>或者<div>容器里，那:nth-child的计数逻辑就完全不适用了。这时候得先定位到共同的父容器，比如所有.entry都在.entry-list下，就用：
```
await browser.click('.entry-list .entry:nth-child(2)');
```
或者直接打开开发者工具，选中第二个.entry，右键复制它的完整CSS选择器替换进去试试。