Cypress 'have.text'断言返回重复值问题求助

问题描述 #

使用Cypress的have.text断言验证购物车徽章文本时，出现实际文本重复的异常：预期文本为"0"，断言返回"00"；控制台打印的元素实际值正确，但断言始终失败。

测试代码 #

describe('ProductCard add to cart increment count to 1', () => {
  it('should reveal corresponding Add to Cart buttons on hover and add to cart triggers an increase in cart count', () => {
    cy.visit('http://localhost:3000');

    // Check if the cart badge exists and has an inner text of 0
    cy.get('[data-test="test-cart-badge"]').should('exist').and('have.text', '0');

    // Get the first ProductCard as an example
    cy.get('[data-test="product-card-test"]')
      .first()
      .invoke('show')
      .scrollIntoView()
      .invoke('attr', 'data-test-id')
      .then((productId) => {
        // Hover over the ProductCard
        cy.get(`[data-test="product-card-test"][data-test-id="${productId}"]`).first().trigger('mouseover');

        // Check if the corresponding Add to Cart buttons are visible
        cy.get(`[data-test="product-card-size-button-test"][data-test-id="${productId}"]`)
          .first()
          .click({ force: true });

        cy.get('[data-test="test-cart-badge"]').should('have.text', '1');
        cy.get('[data-test="test-cart-open-icon"]').click({ force: true });
        cy.get('[data-test="cart-plus-button-test"]').click({ force: true });
        cy.get('[data-test="test-cart-badge"]').should('have.text', '2');
        cy.get('[data-test="cart-minus-button-test"]').click({ force: true });
        cy.get('[data-test="test-cart-badge"]').should('have.text', '1');
        cy.get('[data-test="cart-minus-button-test"]').click({ force: true });
        cy.get('[data-test="test-cart-badge"]').should('have.text', '0');
      });
  });
});

存在问题的断言行 #

cy.get('[data-test="test-cart-badge"]').should('exist').and('have.text', '0');
cy.get('[data-test="test-cart-badge"]').should('have.text', '1');
cy.get('[data-test="test-cart-badge"]').should('have.text', '2');

被测元素结构 #

<div class="mantine-Badge-root size-[1.3rem] mt-[0.25rem] mr-[0.25rem] mantine-15p6f3j" data-test="test-cart-badge">
  <span class="mantine-1t45alw mantine-Badge-inner">1</span>
</div>

错误信息 #

Timed out retrying after 4000ms: expected '[ <div.mantine-Badge-root.size-[1.3rem].mt-[0.25rem].mr-[0.25rem].mantine-4r1tww>, 1 more... ]' to have text '0', but the text was '00'

排查思路与解决方案 #

1. 核心原因：错误信息中的[ <div...>, 1 more... ]说明，cy.get('[data-test="test-cart-badge"]')匹配到了两个相同的元素，Cypress的have.text断言会将所有匹配元素的文本内容拼接返回，因此出现"00"（两个元素的"0"拼接）。

2. 解决步骤：

   • 检查重复元素：确认页面中是否存在多个带有data-test="test-cart-badge"的元素，比如移动端/桌面端购物车徽章同时渲染、组件重复挂载等情况。
   • 精准定位元素：
     • 使用.first()/.last()限定匹配的单个元素：

       cy.get('[data-test="test-cart-badge"]').first().should('have.text', '0');
       

     • 结合父容器选择器缩小范围，确保只选中目标元素：

       cy.get('.cart-header [data-test="test-cart-badge"]').should('have.text', '0');
       

   • 验证元素唯一性：在测试中添加元素数量校验，排查重复渲染问题：

     cy.get('[data-test="test-cart-badge"]').its('length').should('eq', 1);
     

内容的提问来源于stack exchange，提问作者Ari Friedgut