Color

📺 Watch this recipe explained in Check CSS Color Using jQuery-Chai Assertion "have.css".

Confirmed the declared CSS color

Imagine we have an element that changes its color. We can confirm the CSS color attribute using "have.css" jQuery Chai assertion.

<div id="name">Joe</div>
<script>
  setTimeout(() => {
    const el = document.getElementById('name')
    el.style = 'color: red'
  }, 1500)
</script>

cy.get('#name')
  // the current CSS definition is expressed in RGB triple string
  .should('have.css', 'color', 'rgb(255, 0, 0)')

Parent declared CSS color

The same assertion "have.css" works if the parent element sets its style.

<div id="information">
  <div><strong>Personal information</strong></div>
  <div id="name">Joe</div>
</div>
<script>
  setTimeout(() => {
    const el = document.getElementById('information')
    el.style = 'color: red'
  }, 1500)
</script>

cy.get('#name')
  // the current CSS definition is expressed in RGB triple string
  .should('have.css', 'color', 'rgb(255, 0, 0)')

Style class with CSS color

An applied CSS class with text color also can be detected using "have.css" assertion.

<style>
  .information {
    color: red;
  }
</style>
<div id="information">
  <div><strong>Personal information</strong></div>
  <div id="name">Joe</div>
</div>
<script>
  setTimeout(() => {
    const el = document.getElementById('information')
    el.classList.add('information')
  }, 1500)
</script>

cy.get('#name')
  // the current CSS definition is expressed in RGB triple string
  .should('have.css', 'color', 'rgb(255, 0, 0)')