如何使用 then() 并在 Cypress 中获取值
How to use then() and get the value in Cypress
我有一个值为2的span元素。我想检查该值是否大于0,但是在网上检查并实现了每个方法后,它没有工作...
这是我登录 $span
时的控制台
我了解Cypress是异步工作的,所以我使用.then()
来获取element的文本。如何获取 2 的值并执行以下操作 if-else?
HTML
<div>
<span class="badge ml-1 badge-primary">2</span>
</div>
cy.get(".badge.ml-1.badge-primary").then(($span)=> {
if($span.text().includes(0)) {
doFunction1()
} else {
cy.get(xxxxx)
}
)}
您要求的是检查跨度的内容是否大于 0。因此与使用 includes
相比,它需要一些额外的方法。例如,您可以将一个值作为变量读取并检查它是否大于 0:
cy.get(".badge.ml-1.badge-primary").then(($span)=> {
const value = $span.text(); // now you know what the value is
if(value > 0) { // actual check if > 0. Beware, implicit coersion here! read more below.
doFunction1()
} else {
cy.get(xxxxx)
}
)}
然而,value
变量是一个字符串。我的代码有效,因为 JS 会自动将字符串转换为数字。根据您的用例,您可能希望确保它是一个有效数字,而不是其他无法转换为数字的字符串(如“2s”)。
例如,如果值为“2s”,那么 value > 0
检查将是错误的,这可能会导致您的代码出现错误。
cy.get(".badge.ml-1.badge-primary").then(($span)=> {
const value = Number.parseInt($span.text()); // now you know what the value is
if(!Number.isNaN(value) && value > 0) { // value is now of type number, but it may be NaN! (yes, NaN is also a number)
doFunction1()
} else {
cy.get(xxxxx)
}
)}
通过链接从 element
-> text
-> number
的转换方法来实现
cy.get(".badge.ml-1.badge-primary")
.invoke('text') // to text
.then(text => +text) // to number
.then(value => {
if(value > 0) {
doFunction1()
} else {
cy.get(xxxxx)
}
})
等待值2
cy.get(".badge.ml-1.badge-primary")
.invoke('text') // to text
.then(text => +text) // to number
.should('eq', 2) // wait for value 2
.then(() => {
doFunction1() // now doFunction
})
首先确保您使用的选择器是唯一的,这样就不会获取意外的值。其次,您可以等待自定义超时,以防您的网页需要一些时间来填充值,然后应用您的 if-esle 条件。现在,should 命令将重试 7 秒,而不是 4 秒(赛普拉斯默认超时),以检查元素的内部文本值为 2。
cy.get(".badge.ml-1.badge-primary", { timeout: 7000 }).should("have.text", "2")
cy.get(".badge.ml-1.badge-primary")
.invoke(text)
.then((num) => {
if (+num > 0) {
doFunction1()
} else {
cy.get(xxxxx)
}
})
我有一个值为2的span元素。我想检查该值是否大于0,但是在网上检查并实现了每个方法后,它没有工作...
这是我登录 $span
时的控制台我了解Cypress是异步工作的,所以我使用.then()
来获取element的文本。如何获取 2 的值并执行以下操作 if-else?
HTML
<div>
<span class="badge ml-1 badge-primary">2</span>
</div>
cy.get(".badge.ml-1.badge-primary").then(($span)=> {
if($span.text().includes(0)) {
doFunction1()
} else {
cy.get(xxxxx)
}
)}
您要求的是检查跨度的内容是否大于 0。因此与使用 includes
相比,它需要一些额外的方法。例如,您可以将一个值作为变量读取并检查它是否大于 0:
cy.get(".badge.ml-1.badge-primary").then(($span)=> {
const value = $span.text(); // now you know what the value is
if(value > 0) { // actual check if > 0. Beware, implicit coersion here! read more below.
doFunction1()
} else {
cy.get(xxxxx)
}
)}
然而,value
变量是一个字符串。我的代码有效,因为 JS 会自动将字符串转换为数字。根据您的用例,您可能希望确保它是一个有效数字,而不是其他无法转换为数字的字符串(如“2s”)。
例如,如果值为“2s”,那么 value > 0
检查将是错误的,这可能会导致您的代码出现错误。
cy.get(".badge.ml-1.badge-primary").then(($span)=> {
const value = Number.parseInt($span.text()); // now you know what the value is
if(!Number.isNaN(value) && value > 0) { // value is now of type number, but it may be NaN! (yes, NaN is also a number)
doFunction1()
} else {
cy.get(xxxxx)
}
)}
通过链接从 element
-> text
-> number
cy.get(".badge.ml-1.badge-primary")
.invoke('text') // to text
.then(text => +text) // to number
.then(value => {
if(value > 0) {
doFunction1()
} else {
cy.get(xxxxx)
}
})
等待值2
cy.get(".badge.ml-1.badge-primary")
.invoke('text') // to text
.then(text => +text) // to number
.should('eq', 2) // wait for value 2
.then(() => {
doFunction1() // now doFunction
})
首先确保您使用的选择器是唯一的,这样就不会获取意外的值。其次,您可以等待自定义超时,以防您的网页需要一些时间来填充值,然后应用您的 if-esle 条件。现在,should 命令将重试 7 秒,而不是 4 秒(赛普拉斯默认超时),以检查元素的内部文本值为 2。
cy.get(".badge.ml-1.badge-primary", { timeout: 7000 }).should("have.text", "2")
cy.get(".badge.ml-1.badge-primary")
.invoke(text)
.then((num) => {
if (+num > 0) {
doFunction1()
} else {
cy.get(xxxxx)
}
})