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)')

Parse RGB with retries

📺 Watch this example explained in the video Parse RGB Color With Retries.

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

Using query commands from cypress-map to write a retryable chain that queries the element's color, parses it into RGB array of numbers, and confirms the numbers.

Tip: using named capturing groups

Note: we cannot extract the color using an assertion should('have.css', 'color') because it will break retrying the entire chain.

cy.get('#information').click()
cy.get('#information')
  .invoke('css', 'color')
  .invoke(
    'match',
    /^rgb\((?<red>\d+)\, (?<green>\d+)\, (?<blue>\d+)\)$/,
  )
  .print()
  .its('groups')
  // transform each string into a number
  .map({
    red: Number,
    green: Number,
    blue: Number,
  })
  .print()
  .should('deep.equal', {
    red: 255,
    green: 0,
    blue: 0,
  })