Question

我试图通过nightwatch.js命令使用XPath选择器来定位Polymer自定义元素的子元素。例如：

browser
.getAttribute('//th-compare-chart/svg', 'width', function(svgWidth) {

...
})

收率：

ERROR: Unable to locate element: "//th-compare-balance-chart/svg" using: css selector

getAttribute和其他命令的文档声明您可以提供css选择器或xpath的字符串选择器： http://nightwatchjs.org/api#getAttribute

然而，我无法让任何xpath选择器工作。有谁知道如何让这个工作？

###更新

这是XML标记，使用HTML 5 doctype。元素是使用聚合物构建的，并且根据检查器嵌套在一个奇怪的＆＃34;＃shadow-root＆＃34;中。也许它不可能访问阴影根中的元素？

<th-compare-balance-chart class="element ">
  #shadow-root
    <core-style>...</core-style>
    <svg id="chart">...</svg>
  #shadow-root
</th-compare-balance-chart>

Answer 1

您的命令使用默认的CSS选择。要切换到XPath使用：

browser.
    .useXpath()
    .getAttribute('//th-compare-chart/svg', 'width', function(svgWidth) {
    ...
})

Answer 2

您在此处遇到the Shadow DOM。 shadow dom用于防止Web组件与页面其余部分之间的意外交互，并将组件的实现与其接口隔离开来。

实际上，这意味着查询元素不会通过阴影dom边界，除非您明确指定您打算这样做。使用CSS选择器，这可以通过::shadow和/deep/运算符完成。所以这应该有效：

browser
.getAttribute('th-compare-chart::shadow svg', 'width', function(svgWidth) {

...
})

// or

browser
.getAttribute('th-compare-chart /deep/ svg', 'width', function(svgWidth) {

...
})

我对XPath不够熟悉，告诉你它有什么操作符来刺穿阴影dom边界。我可以告诉你，当你掌握th-compare-chart元素时，你可以使用.shadowRoot属性深入到它的影子dom，并以正常方式查询它。例如document.querySelector('th-compare-chart').shadowRoot.querySelector('svg')

请注意，并非所有浏览器都实现了影子dom。 Polymer仍然适用于所有现代浏览器，但您可能需要为选择器做一些额外的工作，以便在支持和不支持shadow dom的浏览器中工作。 More info on shadow dom support

在Nightwatch.js命令中使用XPath来选择Polymer Element的子节点？

2 个答案: