If else condition in Cypress

Question

.grid > languagefield is the element of UI dropdown list

Depends on the language selected on this languagefield, it'll do something

This is what I have but Cypress doesn't hit if condition, something not right with if (Lang == 'American English')

const Date = Cypress.moment().add(-3, 'days').format('YYYY-MM-DD');
const DateUS = Cypress.moment(Date).format('MM/DD');
const DateUK = Cypress.moment(Date).format('DD/MM');
const Lang = '.grid > languagefield'
    
        if (Lang == 'American English') {
          //should get DateUS format  
        } else {
          //should get DateUK format 
         }

Thanks a lot!

Result of cy.get('.grid > :nth-child(7)').invoke('text').then((txt) => { cy.log(txt) })

More info

is this what you're looking for? https://stackoverflow.com/questions/57533756/cypress-how-to-find-by-text-content — albert, Dec 14 '20 at 03:39

Alapan Das · Accepted Answer · 2020-12-14T07:42:48.700

4

You can write something like:

cy.get('.grid > languagefield').invoke('text').then((txt) => {
  if (txt.trim() == 'American English') {
    //Do Something
  } else {
    //Do Something 
  }
})

OR, If you want to use each() to loop through the elements of the dropdown list and then find the text and perform some action, you can do something like:

cy.get('selctor').each(($el) => {
  if ($el.text().trim() == 'American English') {
    //Do Something
  } else {
    //Do Something 
  }
})

edited Dec 14 '20 at 07:42

answered Dec 14 '20 at 05:27

Alapan Das

17,144
3
29
52

thanks for the answer but they both skip IF condition, and go straight to ELSE condition. for .invoke('text'). it skips .then(txt) & IF and goes to ELSE. for .each($el). skips IF and goes to ELSE. The language is set as American English currently. Do you have any idea? thanks – user3601310 Dec 14 '20 at 07:19
May be there is some extra space. I have updated my answer and added `trim()` to remove unwanted space. Can you try now ? – Alapan Das Dec 14 '20 at 07:43
hi, thanks for the code sorry but they both still skip IF condition...... – user3601310 Dec 14 '20 at 10:40
Is you website a public app, then may be I can take a look at it. Or a similar example will also do ? – Alapan Das Dec 14 '20 at 10:43
sorry, it's not public but i can send a screenshot or something you need if you let me know what you need? – user3601310 Dec 14 '20 at 10:46
If you can post the screenshot of the DOM, that will also do. – Alapan Das Dec 14 '20 at 10:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/225929/discussion-between-alapan-das-and-user3601310). – Alapan Das Dec 14 '20 at 10:52

score 1 · Answer 2 · answered Dec 14 '20 at 21:58

If the Profile section is visible, this will get you the text of the dropdown,

const language = Cypress.$('div[name="language"]')  // parent div for language selector
  .children().first()                               // first child is selected text 
  .text()

console.log(language);     // American English

The equivalent for Cypress aliasing

const languageDateFormats = {
  'American English': DateUS,
  'British English': DateUK,
  // other langauges
}

cy.visit('/profile');
cy.get('div[name="language"]')  // parent div for language selector
  .children().first()           // first child is selected text 
  .invoke('text')
  .as('language')

cy.visit('/timeline');
cy.get('@language').then(language => {
  const dateFormat = languageDateFormats[language];
  // test the timeline date format
})

If else condition in Cypress

2 Answers2