Color

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

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 Chaiopen in new window 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 Retriesopen in new window.

<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-mapopen in new window 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 groupsopen in new window

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,
  })