使用FindElement定位嵌套在div类中的span类取消(X)按钮

针对你给出的HTML结构，这里有几种靠谱的Selenium FindElement定位方案，帮你精准找到这个「取消」按钮：

1. 利用Class Name组合定位 #

目标<span>有两个类名：material-icons和cancel-icon，你可以用复合类名的CSS选择器直接定位：

// Java 示例
WebElement cancelBtn = driver.findElement(By.cssSelector("span.material-icons.cancel-icon"));

要是觉得直接定位子元素不够稳妥，也可以先找到它的父容器，再从中定位子元素：

WebElement closeContainer = driver.findElement(By.className("ingredients-container-header-close"));
WebElement cancelBtn = closeContainer.findElement(By.className("cancel-icon"));

2. 通过层级关系的CSS选择器定位 #

利用元素的嵌套层级来缩小范围，这种方式稳定性更高，不容易和页面其他同类型元素撞车：

// 直接定位到目标span
WebElement cancelBtn = driver.findElement(By.cssSelector("div.ingredients-container-header-close span.cancel-icon"));

要是想更精准，还可以加上最上层的容器，进一步锁定范围：

WebElement cancelBtn = driver.findElement(By.cssSelector("div.ingredients-container-header div.ingredients-container-header-close span.material-icons"));

3. 借助元素文本定位 #

这个span里的文本是cancel，也可以用文本匹配的XPath来定位：

// Java 中用XPath匹配文本
WebElement cancelBtn = driver.findElement(By.xpath("//span[text()='cancel']"));

如果页面上有其他文本为cancel的元素，建议结合层级来缩小范围：

WebElement cancelBtn = driver.findElement(By.xpath("//div[@class='ingredients-container-header-close']/span[text()='cancel']"));

小提醒 #

• 如果页面存在多个类似的取消按钮，优先选带父容器层级的CSS选择器或XPath，定位更精准，避免误选其他元素
• 尽量别只用单个Class Name定位，像material-icons这种通用类名，很可能在页面多个图标上都被复用

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