Cypress is reporting the wrong size on element - automated-tests

Question

I'm using cypress to test our pattern library elements. The alert pattern the <p> set to font-size: 14px. When I inspect the CSS and the dev inspector, I see the correct size being rendered.
But cypress is reporting 16.8px. To double check, I asked cypress to log how high the .alert element is. The cy.log reports a height of 34px which is correct. The inspector reports a height of 60px. What is going on here?
```
/// <reference types="Cypress" />
context('AlertButtonClose', () => {
it('Button close displays as designed', () => {
cy.visit('?p=molecules-alerts')
cy.get('#sg-viewport').then(function ($iframe) {
const $jbody = $iframe.contents().find('body')
// Alert Type - All
const $alertAll = $jbody.find('.alert')
cy.screenshot()
cy.log('.alert height: ' + $alertAll.height())
cy.wrap($alertAll)
.should('exist', 'be.visible')
.should('have.css', 'min-height').and('gte', '3.125rem')
cy.wrap($alertAll).find('p')
.should('exist', 'be.visible')
.should('have.css', 'font-size', '14px')
cy.viewport(639, 720)
cy.wrap($alertAll).find('.alert-link')
.should('not.be.visible')
cy.viewport(960, 720)
cy.wrap($alertAll).find('.alert-link')
.should('exist', 'be.visible')
.should('have.css', 'font-weight', '300', 'text-transform', 'uppercase', 'font-size').should('gte', '10.5px')
if ($alertAll) {
expect($alertAll)
.to.have.css('color', 'rgb(255, 255, 255)')
}
// Alert Type - Info
const $alertInfo = $jbody.find('.alert-info')
if ($alertInfo) {
expect($alertInfo)
.to.have.css('background-color', 'rgb(3, 155, 229)')
}
// Alerts Type - Dismissable
const $alertDismissable = $jbody.find('.alert-dismissable')
if ($alertDismissable) {
cy.wrap($jbody).find('.close').should('exist', 'be.visible')
cy.wrap($jbody).find('.close img')
.should('have.css', 'height', '15px')
.should('have.css', 'width', '15px')
.should('have.attr', 'alt').should('not.be.empty')
cy.wrap($jbody).find('.close img')
.should('have.attr', 'src').should('include', 'close-alert.svg')
cy.wrap($jbody).find('.close').click()
cy.wrap($jbody).find('.alert-dismissable').should('not.exist')
}
})
})
})
```
Additionally, the image generated by `cy.screenshot() is crazy over-sized! The alert bar appears to be over 80px in height which utter nonsense.

Answer 1

I don't think this is a bug per se. We are taking an approach to responsive design where we're changing the base-font size on the body tag. It seems as if Cypress is unable to recalculate based on breakpoint in the manner we've implemented:
html {
font-size: $font-size-base; //16px
#media (min-width: 640px) {
font-size: $font-size-base-md; //18px
}
#media (min-width: 960px) {
font-size: $font-size-base-lg; //20px
}
}
li, p {
#include font-size(14)
}
For such a small pattern, the test has morphed into a rather complex exercise:
///
describe('Alert Close Button', () => {
context('iphone-5 resolution', () => {
beforeEach(function () {
cy.viewport('iphone-5')
})
it('GLOBAL & XS breakpoint: Alert displays as designed', () => {
cy.visit('?p=molecules-alerts')
cy.get('#sg-viewport').then(function ($iframe) {
const $jbody = $iframe.contents().find('body')
// Alert Type - All
const $alertAll = $jbody.find('.alert')
cy.log("alert height: " + $alertAll.height())
cy.wrap($alertAll)
.should('exist', 'be.visible')
.should('have.css', 'min-height').should('be.gte', '50px')
cy.wrap($alertAll).find('p')
.should('exist', 'be.visible')
.should('have.css', 'font-size', '14px', 'font-weight', '800', 'line-height', 'calc(14 / 18)', 'min-height', '2.6rem', )
cy.wrap($alertAll).find('.alert-link')
.should('not.be.visible')
if ($alertAll) {
expect($alertAll)
.to.have.css('color', 'rgb(255, 255, 255)')
.to.have.css('padding', '.4375rem 3.125vw')
}
// Alert Type - Info
const $alertInfo = $jbody.find('.alert-info')
if ($alertInfo) {
expect($alertInfo)
.to.have.css('background-color', 'rgb(3, 155, 229)')
}
// Alerts Type - Dismissable
const $alertDismissable = $jbody.find('.alert-dismissable')
if ($alertDismissable) {
cy.wrap($jbody).find('.close').should('exist', 'be.visible')
cy.wrap($jbody).find('.close img')
.should('have.css', 'height', '15px')
.should('have.css', 'width', '15px')
.should('have.attr', 'alt').should('not.be.empty')
cy.wrap($jbody).find('.close img')
.should('have.attr', 'src').should('include', 'close-alert.svg')
cy.wrap($jbody).find('.close').click()
cy.wrap($jbody).find('.alert-dismissable').should('not.exist')
}
})
})
})
context('ipad-2', () => {
beforeEach(function () {
cy.viewport('ipad-2')
})
it('SM breakpoint: Alert displays correctly', () => {
cy.visit('?p=molecules-alerts')
cy.get('#sg-viewport').then(function ($iframe) {
const $jbody = $iframe.contents().find('body')
// Alert Type - All
const $alertAll = $jbody.find('.alert')
if ($alertAll) {
expect($alertAll)
.to.have.css('color', 'rgb(255, 255, 255)')
.to.have.css('padding', '.75rem 3.125vw')
}
})
})
})
context('tablet-mixed', () => {
beforeEach(function () {
cy.viewport(960, 600)
})
it('MD breakpoint: Alert displays correctly', () => {
cy.visit('?p=molecules-alerts')
cy.get('#sg-viewport').then(function ($iframe) {
const $jbody = $iframe.contents().find('body')
// Alert Type - All
const $alertAll = $jbody.find('.alert')
cy.wrap($alertAll)
.should('exist', 'be.visible')
.should('have.css', 'min-height').and('gte', '2.625rem')
cy.wrap($alertAll).find('p')
.should('exist', 'be.visible')
.should('have.css', 'font-size', '16px')
cy.wrap($alertAll).find('.alert-link')
.should('exist', 'be.visible')
.should('have.css', 'font-weight', '300', 'text-transform', 'uppercase', 'font-size', '10.5px')
})
})
})
})