排除某些子元素的 CSS 选择器答案

【问题标题】：CSS selector that excludes some child elements排除某些子元素的 CSS 选择器
【发布时间】：2020-05-31 21:39:38
【问题描述】：

我有这个 HTML：

<div class="item-cost">
    <a data-passage="Shop" class="link-internal macro-link" tabindex="0" id="Link1">$10 <sup>1</sup></a>
</div>

我正在编写这个 testcafe 代码来获取成本：

.expect(Selector('.item-cost').nth(0).innerText)
.eql('$1')

这失败了，因为内部文本是$11，而不是$1。它失败的原因是 sup 元素的内容包含在内部文本中。有什么方法可以修改上面的选择器，以便在不包含 sup 元素的情况下为我提供内部文本？我无法修改 HTML。

【问题讨论】：

【解决方案1】：

在你的测试中也使用 怎么样？

.expect(Selector('.item-cost').nth(0).innerText)
.eql('$1 ' + Selector('.item-cost sup').nth(0).innerText)

【讨论】：

【解决方案2】：

不要使用innerText，而是使用innerHTML，然后使用正则表达式删除尾部...（包括之前的空格）：

.expect(Selector('.item-cost').nth(0).innerHTML.replace(/ <sup>.*<\/sup>$/, ''))
.eql('$1')

这只会给你$10。

【讨论】：

【解决方案3】：

我犹豫是否要在这个讨论中添加我的 2 美分，因为我只是偶然发现它并且对 testcafe 并不熟悉。但是这 2 美分对于评论来说太长了，所以我想我会把它作为一个可能的答案发布，你可以随心所欲。

在我看来，您要做的是选择<a> 节点的文本，同时排除其 子节点的文本。使用 xpath 表达式可以轻松实现这样的操作：

//div/a/text()

不幸的是，testcafe 似乎不支持 xpath，并且将来也没有打算这样做。主要原因似乎是存在可以将 xpath 转换为 css 选择器以供 testcafe 使用的实用程序。

不幸的是，xpath 和 css 选择器并不等价，并且您可以用 xpath 做的事情（目前）不能用 css 选择器完成。而这个案子很可能就是其中之一。

救援may comes this utility for adding xpath support to testcafe。所以我会尝试将它与上面的 xpath 表达式一起使用，看看它是否适合你。如果没有，我想不会造成任何伤害。

【讨论】：