javascript - 如何让 Selenium Java 单击 SVG DOM 树中的 SVG 节点？

Question

我正在尝试使用 SVG 节点自动执行测试。我需要点击一个特定的节点。

我在 Firefox 中单击该元素，单击 F12 启动控制台，然后键入 console.dir($0) 以查看详细信息。这是元素的样子:

text
​
__data__: Object { height: 0, depth: 1, x: 0, … }
​
attributes: NamedNodeMap [ fill="#fff", font-size="36px", font-family="mapicons", … ]
​
baseURI: "https://fnord.co.uk/#/jobs/add/job?@=-702x6714391y19z&lf=1!19.73740"
​
childElementCount: 0
​
childNodes: NodeList [ #text ]
​
children: HTMLCollection []
​
classList: DOMTokenList []
​
className: SVGAnimatedString { baseVal: "", animVal: "" }
​
clientHeight: 0
​
clientLeft: 0
​
clientTop: 0
​
clientWidth: 0
​
dataset: DOMStringMap {  }
​
dx: SVGAnimatedLengthList { baseVal: SVGLengthList, animVal: SVGLengthList }
​
dy: SVGAnimatedLengthList { baseVal: SVGLengthList, animVal: SVGLengthList }
​
farthestViewportElement: <svg id="svgstruct" style="position: relative; overflow: visible; margin-top: 50px; margin-left: 20px; min-width: 100%;" width="100%" height="100%">
​
firstChild: #text ""
​
firstElementChild: null
​
id: ""
​
innerHTML: "\ue05e"
​
isConnected: true
​
lastChild: #text ""
​
lastElementChild: null
​
lengthAdjust: SVGAnimatedEnumeration { baseVal: 1, animVal: 1 }
​
localName: "text"
​
namespaceURI: "http://www.w3.org/2000/svg"
​
nearestViewportElement: <svg id="svgstruct" style="position: relative; overflow: visible; margin-top: 50px; margin-left: 20px; min-width: 100%;" width="100%" height="100%">
​
nextElementSibling: null
​
nextSibling: null
​
nodeName: "text"
​
nodeType: 1
​
nodeValue: null
​
onabort: null
​
onanimationcancel: null
​
onanimationend: null
​
onanimationiteration: null
​
onanimationstart: null
​
onauxclick: null
​
onblur: null
​
oncanplay: null
​
oncanplaythrough: null
​
onchange: null
​
onclick: null
​
onclose: null
​
oncontextmenu: null
​
oncopy: null
​
oncut: null
​
ondblclick: null
​
ondrag: null
​
ondragend: null
​
ondragenter: null
​
ondragexit: null
​
ondragleave: null
​
ondragover: null
​
ondragstart: null
​
ondrop: null
​
ondurationchange: null
​
onemptied: null
​
onended: null
​
onerror: null
​
onfocus: null
​
ongotpointercapture: null
​
oninput: null
​
oninvalid: null
​
onkeydown: null
​
onkeypress: null
​
onkeyup: null
​
onload: null
​
onloadeddata: null
​
onloadedmetadata: null
​
onloadend: null
​
onloadstart: null
​
onlostpointercapture: null
​
onmousedown: null
​
onmouseenter: null
​
onmouseleave: null
​
onmousemove: null
​
onmouseout: null
​
onmouseover: null
​
onmouseup: null
​
onmozfullscreenchange: null
​
onmozfullscreenerror: null
​
onpaste: null
​
onpause: null
​
onplay: null
​
onplaying: null
​
onpointercancel: null
​
onpointerdown: null
​
onpointerenter: null
​
onpointerleave: null
​
onpointermove: null
​
onpointerout: null
​
onpointerover: null
​
onpointerup: null
​
onprogress: null
​
onratechange: null
​
onreset: null
​
onresize: null
​
onscroll: null
​
onseeked: null
​
onseeking: null
​
onselect: null
​
onselectstart: null
​
onshow: null
​
onstalled: null
​
onsubmit: null
​
onsuspend: null
​
ontimeupdate: null
​
ontoggle: null
​
ontransitioncancel: null
​
ontransitionend: null
​
ontransitionrun: null
​
ontransitionstart: null
​
onvolumechange: null
​
onwaiting: null
​
onwebkitanimationend: null
​
onwebkitanimationiteration: null
​
onwebkitanimationstart: null
​
onwebkittransitionend: null
​
onwheel: null
​
outerHTML: "<text fill=\"#fff\" font-size=\"36px\" font-family=\"mapicons\" transform=\"translate(0,30)\">\ue05e</text>"
​
ownerDocument: HTMLDocument https://alloy-labs.yotta.co.uk/#/jobs/add/job?@=-702x6714391y19z&lf=1!19.73740
​
ownerSVGElement: <svg id="svgstruct" style="position: relative; overflow: visible; margin-top: 50px; margin-left: 20px; min-width: 100%;" width="100%" height="100%">
​
parentElement: <g class="node" cursor="pointer" transform="translate(30,110)">
​
parentNode: <g class="node" cursor="pointer" transform="translate(30,110)">
​
prefix: null
​
previousElementSibling: <path d="M0,0a30,30,0,1,0,0,60h0a30,30,0,1,0,0,-60Z" fill="#f5c041">
​
previousSibling: <path d="M0,0a30,30,0,1,0,0,60h0a30,30,0,1,0,0,-60Z" fill="#f5c041">
​
requiredExtensions: SVGStringList { length: 0, numberOfItems: 0 }
​
requiredFeatures: SVGStringList { length: 0, numberOfItems: 0 }
​
rotate: SVGAnimatedNumberList { baseVal: SVGNumberList, animVal: SVGNumberList }
​
scrollHeight: 0
​
scrollLeft: 0
​
scrollLeftMax: 0
​
scrollTop: 0
​
scrollTopMax: 0
​
scrollWidth: 0
​
style: CSS2Properties {  }
​
systemLanguage: SVGStringList { length: 0, numberOfItems: 0 }
​
tabIndex: -1
​
tagName: "text"
​
textContent: "\ue05e"
​
textLength: SVGAnimatedLength { baseVal: SVGLength, animVal: SVGLength }
​
transform: SVGAnimatedTransformList { baseVal: SVGTransformList […], animVal: SVGTransformList […] }
​
viewportElement: <svg id="svgstruct" style="position: relative; overflow: visible; margin-top: 50px; margin-left: 20px; min-width: 100%;" width="100%" height="100%">
​
x: SVGAnimatedLengthList { baseVal: SVGLengthList, animVal: SVGLengthList }
​
y: SVGAnimatedLengthList
​​
animVal: SVGLengthList { numberOfItems: 0, length: 0 }
​​
baseVal: SVGLengthList
​​​
length: 0
​​​
numberOfItems: 0
​​​
__proto__: SVGLengthListPrototype { clear: clear(), initialize: initialize(), getItem: getItem(), … }
​​
__proto__: SVGAnimatedLengthListPrototype { baseVal: Getter, animVal: Getter, … }
​
__proto__: SVGTextElementPrototype
​​
constructor: ()
​​​
length: 0
​​​
name: "SVGTextElement"
​​​
prototype: SVGTextElementPrototype { … }
​​​
Symbol(Symbol.hasInstance): undefined
​​​
__proto__: function ()
​​
__proto__: SVGTextPositioningElementPrototype

我尝试使用按类名查找来查找它，但这没有用:

String className="SVGAnimatedString";
        List<WebElement> cardTitles = driver.findElements(By.className(className));

显然className不是指这种className吗？

所以我尝试使用 cssSelector 找到它。这可行，但用处不大，因为每次屏幕加载时 CSS 选择器都会更改。 找到我的元素后，如果我只使用 element.click 单击它，什么也不会发生。 如果我使用此 Javascript 单击它，它会抛出异常:

JavascriptExecutor executor = (JavascriptExecutor) driver;
            executor.executeScript("arguments[0].click();", element);

异常信息:

org.openqa.selenium.JavascriptException: TypeError: arguments[0].click is not a function

如何让点击操作此元素？

这不是 Selenium WebDriver [Java]: How to Click on elements within an SVG using XPath 的副本

与那个询问者不同，我设法找到了我的元素。

我的问题是点击那个元素。

浏览器:Firefox Quantum 59.0.1(64 位) 壁虎驱动程序:0.19.1 Selenium jar :3.8.1

Answer 1

我认为您的查找方式是错误的。还有很多东西可以添加到这篇文章中以帮助调试。

1. 什么版本的 firefox、webdriver(firefox、marionetter 或 gecko) 你用的是 Selenium jar 吗？
2. 它是否适用于其他浏览器？

回应:
显然className不是指这种className

您可以从控制台检查您的查找语法，因此在您的情况下键入以下内容以查找具有 SVGAnimatedString 类的元素:

$('.SVGAnimatedString')

单击折叠箭头查看是否找到任何内容。

根据您发布的属性，您的元素没有设置任何类值:

classList: DOMTokenList []

在这个网站https://demos.telerik.com/kendo-ui/dragdrop/events
点击大圈重复

console.dir($0)  
classList: DOMTokenList [ "k-header" ]

这是DOM中的元素

<div id="droptarget" class="k-header" data-role="droptarget">Drag the small circle here.</div>

因此这些 CSS 选择器起作用:

$('.k-header') ==> finds 6, class only
$('div.k-header')  ==> finds 4, element type and class
$('div.k-header[data-role="droptarget"]') ===> finds 1, as above with attribute and value

你要使用什么 CSS 选择器？

我注意到发布的属性还有:

clientHeight: 0
​clientLeft: 0
clientTop: 0
clientWidth: 0

所以看起来你有一个隐藏的元素？

我的建议是单击该元素，在 DOM 中显示它，然后尝试在您正在使用的元素之上或之下的几个元素，您可能会发现这些元素具有稳定的属性，这使得它更容易。

您还可以使用此代码仔细检查您的 webdriver 和 selenium 认为元素所在的位置(更新以创建驱动程序):

 WebDriver webDriver = new FireFoxDriver();
 Actions actions = new Actions(webDriver);
 webDriver.navigate().to("https://demos.telerik.com/kendo-ui/dragdrop/events");
 Thread.sleep(500);
 WebElement drop = webDriver.findElement(By.cssSelector("#droptarget"));
 //movetoelement should be center and is
 actions.moveToElement(drop).contextClick().perform();
 Thread.sleep(500);
 webDriver.quit();

我使用过 SVG 元素，正常的 .click() 工作正常: 带有 geckodriver 0.18.0 和 selenium-java:3.7.1 的 Firefox 57.0.2、57.0.3、58.0.2、59.0