How to compare text content of two elements via array

Question

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

Michael Hines · Answer 1 · 2021-09-11T09:17:27.757

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'))

Thanks I used Alapan Das solution, but from your answer I learnt something new :) — wojnarto, Sep 13 '21 at 06:55

score 1 · Accepted Answer · answered Sep 10 '21 at 15:55

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
          }
        })
    })
})

Recently I just changed if else into the expect($assertion.text()).to.equal(secondText) — wojnarto, Sep 13 '21 at 07:12

score 0 · Answer 3 · answered Sep 13 '21 at 06:56

0

Thanks guys, the issue is resolved.

answered Sep 13 '21 at 06:56

wojnarto

411
4
9

How to compare text content of two elements via array

3 Answers3