Cypress examples (v7.1.0)

# Non-breaking space

Dealing with   character aka Non-breaking space.

# Via cy.contains

When using cy.contains command Cypress automatically converts the   entity into space character. Thus cy.contains finds element that include  .

<div data-testid="testattr">
  <div><span>GBP 0.50</span></div>
</div>
GBP 0.50
// both commands work
cy.contains('[data-testid=testattr]', 'GBP 0.50').should('be.visible')
cy.get('[data-testid=testattr]')
  .filter(':contains("GBP 0.50")')
  .should('have.length', 1)

# Asserting text

But if the HTML contains the whitespace special character &nbsp; then checking elements by text is tricky. See #9530 for example. This is because .filter uses jQuery :contains selector which uses literal text match.

<div data-testid="testattr">
  <div><span>GBP&nbsp;0.50</span></div>
</div>
GBP 0.50
cy.contains('[data-testid=testattr]', 'GBP 0.50').should('be.visible')

<div data-testid="testattr">
  <div><span>GBP&nbsp;0.50</span></div>
</div>
GBP 0.50
// we can filter by text before the &nbsp;
cy.get('[data-testid=testattr]')
  .filter(':contains("GBP")')
  .should('have.length', 1)

cy.get('[data-testid=testattr]')
  // the following filter DOES NOT WORK
  // .filter(':contains("GBP 0.50")')
  // the following filter DOES NOT WORK
  // .filter(':contains("GBP&nbsp;0.50")')
  // but the Unicode representation of non-breaking space character works
  .filter(':contains("GBP\u00a00.50")')
  .should('have.length', 1)

<div data-testid="testattr">
  <div><span>GBP&nbsp;0.50</span></div>
</div>
GBP 0.50
cy.get('[data-testid=testattr]')
  .find('span')
  .should('have.text', 'GBP\u00a00.50')

# Filtering using cy.filter

Just checking how .filter(:contains) works

<ul>
  <li>Home</li>
  <li>Services</li>
  <li>Advanced Services</li>
  <li>Pricing</li>
  <li>Contact</li>
</ul>
  • Home
  • Services
  • Advanced Services
  • Pricing
  • Contact
cy.get('li').filter(':contains("Services")').should('have.length', 2)