When there are two same elements Cypress is concatenating their values

[ericrommel]

Current behavior

Hey Folks,

In my environment, developers are duplicating the elements based on the screen resolution. One group of elements will be visible when the other one is hidden and vice-versa. It's being done from the CSS side. The issue is that Cypress is finding the two elements from the DOM (e.g.: using the same data-cy id) and is concatenating their values. The test fails as I'm trying to check a value, let's say 0 but Cypress shows that the current value is 0 0.

The code part into a holding.component.html file:

    <div class="table-row">
      <div class="row">
        <div class="col-6 table-row__key">{{ holdingInfoContent.yourTotalShares }}</div>
        <div class="col-6 table-row__value" data-cy="total-shares">
          {{ (holding.shareQuantity | number) ?? '-' }}
        </div>
      </div>
    </div>

The line that is doing the check in a test.spec.ts file:

this.pageElements.holdingDetail.totalShares.shouldHaveText('0')

My .shouldHaveText() method, is like this:

  shouldHaveText(text: string): CyElement {
    this.shouldBeVisible()
    this.get().should('have.text', text.trim())
    return this
  }

And this .get() method implemented is checking for visibility:

 get(
    options?: Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow>,
  ): Cypress.Chainable {
    if (this.visible) {
      return cy.xcss(this.selector, options).filter(':visible')
    } else {
      return cy.xcss(this.selector, options)
    }
  }

This is why Cypress is finding two elements as you can see in the screenshot below:

But as I said, although there are two almost the same blocks, and inside them, the same elements, elements look okay. A very short version of this could be like this:

...
<div class="d-flex flex-column flex-md-row sell-container mt-2 ng-star-inserted">
   <div **class="d-block d-md-none mt-4 mb-3"**>
      <div class="table-row">
         <div class="row">
            <div class="col-6 table-row__key">Your total shares</div>
            <div class="col-6 table-row__value" data-cy="total-shares"**> 0 <**/div> 
         </div>
   </div>
...
   <div **class="d-none d-md-block"**>
      <div class="table-row">
         <div class="row">
            <div class="col-6 table-row__key">Your total shares</div>
            <div class="col-6 table-row__value" data-cy="total-shares"**> 0 <**/div>
         </div>
      </div>
   </div>
</div>
...

A block is set in Style like:

@media (min-width: 768px)
.d-md-none {
    display: none !important;
}

The other one is like:

@media (min-width: 768px)
.d-md-block {
    display: block !important;
}

Can someone advise why Cypess is acting like that?

Let me know if you have any other questions that can help to understand/fix this issue.

Thanks in advance...

Desired behavior

Even though there are two elements, they shouldn't be "concatenated".

Test code to reproduce

Added in description

Cypress Version

12.17.2

Node version

v16.19.0

Operating System

Win10 Enterprise (v10.0.19045 Build 19045)

Debug Logs

No response

Other

No response

[jennifer-shehane]

@ericrommel What is cy.xcss doing?

There are a lot of variables included with the wrapping of commands. Does the same issue occur with cy.get([data-cy="total-shares"])?

[ericrommel]

@ericrommel What is cy.xcss doing?

There are a lot of variables included with the wrapping of commands. Does the same issue occur with cy.get([data-cy="total-shares"])?

Note: Attached screenshot missed before.
Hi @jennifer-shehane, this is a Cypress.Command just to find the elements using XPath and CSS. If I use cy.get([data-cy="total-shares"]), the result is the same (values concats). However, if I use cy.get([data-cy="total-shares"]:visible) or cy.get([data-cy="total-shares"]:hidden), it brings me the correct value: 0. I don't want to specify visibility in terms of testing, as we have scenarios where the screen resolution changes and this is not a good thing to create tests for specific resolutions (we have more than 500 tests).

[ericrommel]

Hey @jennifer-shehane, have you had a chance to see my last message? Is this enough info?

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.