Automated tests Cypress报告元素上的大小错误

我正在使用cypress测试我们的模式库元素。警报模式将

设置为

字体大小：14px

。当我检查CSS和dev检查器时，我看到呈现的大小是正确的

但是cypress正在报告

16.8px

。为了再次检查，我要求cypress记录

.alert

元素的高度。

cy.log

报告的高度为34px，这是正确的。检查员报告高度为60px。这是怎么回事

```

//
上下文（'AlertButtonClose'，（）=>{
它（'按钮关闭按设计显示'，（）=>{
cy.visit（“？p=0”）
cy.get（'#sg viewport'）。然后（函数（$iframe）{
常量$jbody=$iframe.contents（）.find（'body'）
//警报类型-全部
常量$alertAll=$jbody.find（'.alert'））
cy.截图（）
cy.log（'.alert height:'+$alertAll.height（））
cy.wrap（$alertAll）
.should（'exist'，'be.visible'）
.should（'have.css'，'minheight'）和（'gte'，'3.125rem'））
cy.wrap（$alertAll）.find（'p'））
.should（'exist'，'be.visible'）
.should（'have.css'，'font size'，'14px'）
cy.viewport（639720）
cy.wrap（$alertAll）.find（'.alert链接'）
.should（'not.be.visible'）
cy.viewport（960720）
cy.wrap（$alertAll）.find（'.alert链接'）
.should（'exist'，'be.visible'）
.should（'have.css'，'font-weight'，'300'，'text-transform'，'uppercase'，'font-size'）。should（'gte'，'10.5px'））
如果（$ALLERTALL）{
期望值（$alertAll）
.to.have.css（'color'，'rgb（255，255，255）'
}
//警报类型-信息
常量$alertInfo=$jbody.find（'.alert info'））
如果（$alertInfo）{
expect（$alertInfo）
.to.have.css（'background-color'，'rgb（3155229'））
}
//警报类型-可解除
常量$alertDismissable=$jbody.find（“.alert dismissable”）
如果（$alertDismissable）{
cy.wrap（$jbody）.find（'.close'）。应该（'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'）。单击（）
cy.wrap（$jbody）.find（'.alert dismissable'）.should（'not.exist'））
}
})
})
})

```

此外，“cy.screenshot（）生成的图像尺寸过大！警报条的高度似乎超过了80像素，简直是胡说八道

---

我认为这本身不是一个bug。我们正在采取一种响应性设计的方法，即更改

正文

标签上的基本字体大小。似乎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)
}

对于这样一个小模式，测试已经演变成一个相当复杂的练习： ///

---

这可能是柏树上的虫子吗？这看起来真的很奇怪。它看起来像一个。我将把这个问题记录在git回购协议中，看看它是否生效。我只是想进行尽职调查，看看是否有其他人遇到过这种情况。

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