如何使用Selenium/Java定位并点击指定SVG文本元素？

问题背景 #

你正在用Selenium和Java构建测试用例，需要定位并点击Firefox中的一个SVG内的text元素，该元素的属性如下：

OuterHTML: <text transform="translate(69,0)" text-anchor="middle" fill="#fff" style="font-family: Times New Roman; font-size: 32px; font-style: italic; font-weight: bold;" dominant-baseline="central">?</text> 
InnerHTML: ? 
CSS Selector: g.node:nth-child(4) > g:nth-child(1) > g:nth-child(4) > text:nth-child(2) 
CSS path: html body.firefox div.gwt-PopupPanel.map-overlay-popup.fade-in div.popupContent div div.form-row.margin-0.ps.ps--theme_default div#layer-builder-svg-container.padding-50.padding-bottom-100 svg g.node g g text 
XPath: /html/body/div[8]/div/div/div/div[1]/svg/g[3]/g/g[3]/text

你尝试了以下几种定位方式但都失败了：

driver.findElements(By.xpath("//text")); 
driver.findElements(By.xpath("/html/body/div/div/div/div/div/svg/g/g/g/text")); 
driver.findElements(By.xpath("/html/body/div[8]/div/div/div/div[1]/svg/g[3]/g/g[3]/text"));

问题原因 #

普通XPath无法直接定位SVG元素，因为SVG标签属于XML命名空间，Selenium默认不会识别这类命名空间下的标签，所以直接用//text找不到目标元素。另外，绝对XPath（比如你用的/html/body/div[8]/...）非常脆弱，页面结构稍有变化就会失效。

最终解决方案 #

你采用的方法是可行的，下面整理并解释下这个方案：

Common.myPrint(thisClass + " clickQuestionMark..."); 
String textToFind="translate(69,0)"; 
List<WebElement> elements = driver.findElements(By.xpath("//*[name()=\"text\"]")); 
Common.myPrint(thisClass + " elements count: " + elements.size()); 

for (WebElement element : elements) { 
    // 获取元素属性
    String text = Common.retryingGetAttributes(element, driver); 
    if (text != null) { 
        text = text.trim(); 
        Common.myPrint(thisClass + " text: " + text); 
        if (text.contains(textToFind)) { 
            Common.myPrint(thisClass + " element found."); 
            Actions actions = new Actions(driver); 
            Common.myPrint(thisClass + " click on element."); 
            actions.moveToElement(element).click().build().perform(); 
            Common.myPrint(thisClass + " click performed on element. " ); 
            return true; 
        } 
    } 
} 
return false;

方案思路说明 #

1. 定位SVG的text元素：用//*[name()="text"]来匹配SVG中的所有text标签，这是定位SVG元素的标准方式，解决了命名空间的问题。
2. 筛选目标元素：通过元素的transform属性值（translate(69,0)）来筛选出你需要的那个text元素，避免误定位其他text标签。
3. 模拟点击：使用Actions类的moveToElement+click来执行点击，这种方式适合需要鼠标悬停才能交互的元素，确保点击操作能被正确触发。

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