CODEWITHSUNDEEP
javascriptautomated-testscypress
wojnarto
wojnarto

Reputation: 411

How to compare text content of two elements via array

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

Upvotes: 3

Views: 265

Answers (3)

wojnarto
wojnarto

Reputation: 411

Thanks guys, the issue is resolved.

Upvotes: 0

Michael Hines
Michael Hines

Reputation: 1108

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

Upvotes: 2

Alapan Das
Alapan Das

Reputation: 18619

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

Upvotes: 1

Related Questions