如何使用Selenium+ChromeDriver获取元素下带指定属性的所有后代元素

Selenium本身支持通过定位表达式直接在指定父元素的作用域内完成属性匹配，匹配逻辑在浏览器内核侧执行，直接返回符合规则的元素集合，完全不需要先拉取全量后代再在Java端做二次过滤，性能远高于全量拉取后遍历筛选的实现。

基于XPath的实现（适配复杂匹配场景） #

XPath语法中以.开头的相对路径代表从当前调用定位方法的元素节点开始检索，.//匹配当前节点下任意深度的后代元素，你可以直接在表达式中写入属性匹配规则：

// 先定位到你要限定范围的分组父元素
WebElement parentContainer = driver.findElement(By.id("your-parent-group-id"));
// 示例1：匹配所有带data-upload属性、且属性值等于valid的后代元素
List<WebElement> matchedEls = parentContainer.findElements(By.xpath(".//*[@data-upload='valid']"));
// 示例2：匹配所有存在custom-tag属性（不限制属性值）的后代元素
List<WebElement> hasAttrEls = parentContainer.findElements(By.xpath(".//*[@custom-tag]"));
// 示例3：匹配所有class属性包含img-card、且alt属性不为空的后代元素
List<WebElement> complexMatchEls = parentContainer.findElements(By.xpath(".//*[contains(@class,'img-card') and @alt!='']"));

基于CSS选择器的实现（适配简单匹配场景，性能更优） #

CSS选择器通过空格分隔代表后代层级关系，属性匹配规则可以直接写入选择器，在ChromeDriver下简单场景的执行速度比XPath高20%左右：

// 同样基于已定位的父元素检索
WebElement parentContainer = driver.findElement(By.id("your-parent-group-id"));
// 示例1：匹配所有带data-src属性的后代div元素
List<WebElement> divWithSrc = parentContainer.findElements(By.cssSelector("div[data-src]"));
// 示例2：匹配所有type属性为checkbox、且name属性前缀为opt的后代元素
List<WebElement> targetCheckboxes = parentContainer.findElements(By.cssSelector("input[type='checkbox'][name^='opt']"));

注意点：必须通过你定位到的父元素实例调用findElements方法，如果直接通过WebDriver实例调用上述定位表达式，会在整个页面范围内检索元素，无法限定到你指定的分组范围。

方案选型参考 #

• 仅需要简单属性存在、属性值全等/前缀/后缀/包含匹配时，优先选CSS选择器，执行效率更高
• 需要多属性逻辑组合、联动元素文本、轴定位等复杂规则时，选XPath，灵活度更高

内容的提问来源于stack exchange，提问作者DGStar