I need to compare if two different elements contain the same text. Case: I have 5 different buttons time periods lets assume they are "Day, Week, Month, Year, Decade" Every time when I click on some particular button I want to compare if the value in the second element on the chart below is changed as well and is the same.
My code is:
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()
})
I assume that I can't use cy.get('Second element).text(). I tried to used another then and create a const with secondElement.text() this is not working as well.
If you have any ideas, let me know.
Thanks
Wrap the comparsion in a function, then call it for each button
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'))
Detached from DOM
Sometimes the button element may be replaced after clicking (particularly a React app). You might see a "detached from DOM" error.
In this case, you need to re-query the button inside the function
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'))
Based on what I understood from the question here's what you can do.
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
}
})
})
})
Thanks guys, the issue is resolved.