Using Cypress to check CSS

It is possible to use Cypress to check the CSS values of elements on the page. These can be added as custom commands to /support in another .JS file like this:

Cypress.Commands.add('h2Header', () => {
  cy.get('h2')
    .should('have.css', 'font-family', 'IBMPlexSans-SemiBold')
    .should('have.css', 'font-size', '30px')
    .should('have.css', 'font-weight', '700')
    .should('have.css', 'line-height', '50px')
    .should('have.css', 'color', 'rgba(0, 0, 0, 0.87)')
})

Then add the hook to the .JS file in the header of the test -

import ‘../../../support/css.js’

and add the file to /support/index.js:
import ‘./css’

Then you can check both the text as well as the CSS for it like this

cy.h2Header().contains('Basic Information')