如何在<span>包含中<a>获取文本

Question

我尝试在HTML下面获得<span>的文本:

<td data-v-c0a5153a="" style="min-width: 300px; width: 300px;">
<span><!---->
<span class="v-tooltip v-tooltip--bottom"></span>
<span aria-haspopup="true" aria-expanded="false">
<a class="downloaded--text">Apple</a>
<!---->
</span>
</span>
<span>
<span>,</span>
<span class="v-tooltip v-tooltip--bottom">
<!---->
</span>
<span aria-haspopup="true" aria-expanded="false">
<a class="downloaded--text">Water mellon</a>
<!---->
</span>
</span>
<!---->

下面是我的代码:

cy.get('#freeg-list-table-report')
.find('tbody tr').eq(0).find('td').eq(5)
.find('span').invoke('text')
.then(text => {  
cy.log(text)
})

日志显示:

苹果苹果

Water mellon

为什么是重复的?我该怎么做才能得到:

苹果

水梅隆

----更新----

我从

得到一个数组listA = ["苹果";西瓜"]

下面是我的代码:

const listA = []
cy.get('#freeg-list-table-report')
.find('tbody tr').eq(0).find('td').eq(5)
.find('span')
.find('a')
.each(a => {
const text = a.text()
listA.push(text)
cy.log(text);
})
cy.log(listA)
cy.log(listA[0])

但是当我尝试cy.log(listA[0]) =>结果:空

Answer 1

这是因为你有两层<span>，每一层都贡献了它所看到的innerText。

通过调试，如果你运行这个

cy.get('span')
.then($els => {
const debug = [...$els].map((el, index) => {
return `${el.tagName} #${index}: ${el.innerText}`
})
console.log(debug)
})

你看到的结果是

[
'SPAN #0: Apple ', 
'SPAN #1: ', 
'SPAN #2: Apple ', 
'SPAN #3: , Water mellon', 
'SPAN #4: ,', 
'SPAN #5: ', 
'SPAN #6: Water mellon'
]

这是因为invoke('text')从当前元素返回text和所有子元素.

所以SPAN #0给了你Apple即使它没有直接包含那个文本，因为它的子<span>有它。

---

如果您将元素更改为<a>，您将得到正确的结果

cy.get('#freeg-list-table-report')
.find('tbody tr').eq(0).find('td').eq(5)
.find('a').invoke('text')
.then(text => {  
cy.log(text)           // log: Apple Water mellon
})

---

如果出于某种原因必须使用.find('span')，则需要更改.invoke('text')

cy.get('#freeg-list-table-report')
.find('tbody tr').eq(0).find('td').eq(5)
.find('span')
.then($els => $els.clone().children().remove().end().text() ) // self explanatory 
.then(text => {  
cy.log(text)           // log: Apple Water mellon
})

Answer 2

这个Cypress代码以您要求的格式记录标签的文本:

cy.get('span a.downloaded--text').each(($el) => {
const text = $el.text().trim()
cy.log(text)
})

cy.get()选择<span>标签内所有类为downloaded--text的元素。然后.each()方法遍历每个元素，.text()获取文本内容。

在.each()函数中，我们通过修剪任何额外的空白来格式化文本，然后使用cy.log()命令对其进行记录。这将以您所要求的格式将文本输出到Cypress测试运行器控制台。

另外，我使用.each()方法而不是.invoke('text')，所以我可以为每个元素单独记录文本，而不是将它们组合在一个字符串中。