cypress validate style code example

Example 1: cypress validate style

it('starts with black background', () => {
  cy.visit('index.html')
  cy.get('body').should('have.css', 'background-color', 'rgb(0, 0, 0)')
})

Example 2: cypress validate style

it('changes background color', () => {
  cy.visit('index.html')
  cy.get('body').should('have.css', 'background-color', 'rgb(0, 0, 0)')

  // select the new color value in the <input type="color">
  // element and trigger "change" event
  cy.get('input[type=color]')
    .invoke('val', '#ff0000')
    .trigger('change')

  // check the background color has been changed
  cy.get('body')
    .should('have.css', 'background-color', 'rgb(255, 0, 0)')
})