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

Question

我正在尝试使用 XPath 选择器通过 nightwatch.js 命令来定位 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 文档类型。该元素是使用聚合物构建的，根据检查员的说法，它嵌套在一个奇怪的“#shadow-root”中。也许无法访问 shadow-root 中的元素？

<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 组件与页面其余部分之间发生意外交互，并将组件的实现与其接口隔离。

实际上，这意味着查询元素不会通过 shadow 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 还不够熟悉，无法告诉您它有哪些运算符用于穿透 shadow dom 边界。我可以告诉你，当你得到一个th-compare-chart 元素时，你可以使用.shadowRoot 属性潜入它的shadow dom，并以正常方式查询它。例如document.querySelector('th-compare-chart').shadowRoot.querySelector('svg')

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