Cypress assertion of two classes

Question

I have this code on Cypress

cy.wrap(null).then(() => {
   const $calculatorPayout = Cypress.$(".flex.flex-col.items-center.justify-center.h-\\[50px\\].w-10.border.border-solid.border-black-main")
   const $usualPayout = Cypress.$('div[class="relative flex flex-col items-center justify-center font-bold text-[#2F2F2F]"] [class="height-content"]').last()

   if ($calculatorPayout.length > 0) {
     expect($calculatorPayout).to.be.visible;
     expect($calculatorPayout.text()).to.match(/^\d{3}\.\d{1}%$/);
   } else {
     expect($calculatorPayout).to.not.exist;
     expect($usualPayout).to.be.visible;
     expect($usualPayout.text()).to.match(/^(-|\d+\.\d{1}%)/);
   }
})

My main idea is that if the element with class=flex.flex-col.items-center.justify-center.h-\\[50px\\].w-10.border.border-solid.border-black-main exists, it should be visible and contain text with the given format.

Otherwise, if it doesn't exist, another element with class=div[class="relative flex flex-col items-center justify-center font-bold text-[#2F2F2F]"] [class="height-content"] should be present, and it should contain text with the mentioned format.

The issue is that, the element in the 'else' statement is considered as an object, most probably because of cy.wrap(null) in the beginning, and it cannot invoke its text, in order to assert that it has the format.

I need some ideas how can I change the code, so it can work properly

Answer 1

I used this answer Cypress assert A or B using the jQuery multiple selector for something similar.

So in your case, put both selectors in a cy.get() and you will get async retry as a bonus.

const calculatorPayoutSelector = '.flex.flex-col.items-center.justify-center.h-\\[50px\\].w-10.border.border-solid.border-black-main'
const usualPayoutSelector = 'div[class="relative flex flex-col items-center justify-center font-bold text-[#2F2F2F]"] [class="height-content"]:last'

cy.get(calculatorPayoutSelector, usualPayoutSelector)
  .then($el => {
    expect($el).to.be.visible;

    const re = $el.selector === calculatorPayoutSelector ? /^\d{3}\.\d{1}%$/) 
      : /^(-|\d+\.\d{1}%)/;
    expect($el.text()).to.match(re)
  }

The selectors are simply awful, I would work on that. Too many styling classes to use in a production-quality test.