Cypress сообщает о неправильном размере элемента

Я не думаю, что это ошибка сама по себе. Мы применяем подход к отзывчивому дизайну, где мы меняем размер базового шрифта на теге body. Кажется, что Cypress не может пересчитать на основе точки останова таким образом, который мы реализовали:

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

Для такого маленького шаблона тест превратился в довольно сложное упражнение: ///

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