选择器提取不同类型的元素值 tagName答案

【问题标题】：Selector to extract element value of type different tagName选择器提取不同类型的元素值 tagName
【发布时间】：2019-07-16 12:57:16
【问题描述】：

我的网页上有一个字符串，看起来像“@Account9 Hey Dude”。 @Account9 是一个链接，'Hey Dude' 是跨度。请帮我创建选择器来提取这个“@Account9 Hey Dude”。

注意：可以找到类似 selenium 的“normalize-space”方法。

@Account9

嘿伙计

【问题讨论】：

我的代码：
@Account9
：嘿伙计
因此，选择器可以是单个项目或项目列表。因此，您可以找到类r-18u37iz，它只是一个项目。然后它将有2个子项。然后，您可以在需要时关闭这些项目。你想用链接和跨度做什么？您是否要验证它们？连接它们？....
你需要的东西很容易用 XPath 实现，你可以提取两个元素然后连接它们的文本吗？在纯 CSS 的情况下，我们将需要两个选择器，这将使我们能够精确地仅提取我们需要的文本，而不管嵌套的 div 是否繁重。

标签： automation automated-tests e2e-testing web-testing testcafe

【解决方案1】：

创建一个提取所提供标记的内部文本的选择器：

<div class=“XYZ123> 
    <span class="r-18u37iz"> 
    <a href="/Account9" dir="ltr" role="link" data-focusable="true" class=“ABC123”>@Account9 </a> 
    </span> 
</div> 
<span class=“ABCxyz123”> :Hey Dude</span

您需要找到这些元素的第一个父元素（div class=“XYZ123 和 span class=“ABCxyz123”），为其指定 CSS 选择器并调用 innerText 属性。

const targetText = await Selector('<parent_of_these_elements>').innerText;

【讨论】：