如何通过数组比较两个元素的文本内容

Question

我需要比较两个不同的元素是否包含相同的文本。案例:我有5个不同的按钮时间段，假设它们是"日、周、月、年、十年"。每次当我点击某个特定的按钮时，我都想比较一下下图中第二个元素的值是否也发生了变化。

我的代码是:

isAgregationBarChoosenValuePresent() {
const selectors = ['button[data-testid="period-button-DAY"]',
'button[data-testid="period-button-WEEK"]',
'button[data-testid="period-button-MONTH"]',
'button[data-testid="period-button-YEAR"]',
'button[data-testid="period-button-DECADE"]']
selectors.forEach(($selector) => {
cy.get($selector, { timeout: 10000 }).eq(0).click().then($assertion => {
const assertionText = $assertion.text()
return assertionText === cy.get('Second element).text()
})

我假设我不能使用cy.get('Second element ').text()。我试着用另一个然后用secondElement.text()创建一个const，这是不工作的。

如果你有什么想法，请告诉我。

感谢

Answer 1

将比较括在函数中，然后为每个按钮调用

const compare = ($button, selector2) => {
cy.get(selector2).then($selector2 => {
expect($button.text()).to.eq($selector2.text())
})
}
const selectors = ...
selectors.forEach((buttonSelector) => {
cy.get(buttonSelector, { timeout: 10000 }).click()
.then($button => compare($button, 'Second element'))

from DOM

有时候button元素在点击后可能会被替换(特别是在React应用中)。你可能会看到一个与dom分离的";"错误。在这种情况下，您需要重新查询函数

中的按钮。

const compare = (buttonSelector, selector2) => {
cy.get(buttonSelector).then($button => {
cy.get(selector2).then($selector2 => {
expect($button.text()).to.eq($selector2.text())
})
})
}
const selectors = ...
selectors.forEach((buttonSelector) => {
cy.get(buttonSelector, { timeout: 10000 }).click()
.then(() => compare(buttonSelector, 'Second element'))

Answer 2

根据我对这个问题的理解，你可以这样做。

const selectors = [
'button[data-testid="period-button-DAY"]',
'button[data-testid="period-button-WEEK"]',
'button[data-testid="period-button-MONTH"]',
'button[data-testid="period-button-YEAR"]',
'button[data-testid="period-button-DECADE"]',
]
selectors.forEach(($selector) => {
cy.get($selector, { timeout: 10000 })
.eq(0)
.click()
.then(($assertion) => {
cy.get("Second element")
.invoke("text")
.then((secondText) => {
if ($assertion.text() == secondText) {
//Do Something
} else {
//Do something
}
})
})
})

Answer 3

谢谢大家，问题解决了。