不包含某些子元素的CSS选择器

Question

我有这个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。

Answer 1

也如何在测试中使用<sup>？

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

Answer 2

不是使用innerText，而是使用innerHTML，然后使用正则表达式删除尾随的<sup>...</sup>（包括<sup>之前的空格：]]]

.expect(Selector('.item-cost').nth(0).innerHTML.replace(/ <sup>.*<\/sup>$/, ''))
.eql('$1')
这将只给您$10。

Answer 3

由于我刚好偶然发现它，并且对testcafe并不真正熟悉，因此我不愿意在讨论中加上2美分。但是那2美分太长了，无法发表评论，因此我认为我会将其发布为可能的答案，然后您将按照自己的意愿做出选择。