Question

我正在使用cypress来测试我们的模式库元素。 <p>的警报模式设置为font-size: 14px。当我检查CSS和开发人员检查器时，我看到了正确的尺寸。

但是赛普拉斯正在报告16.8px。为了仔细检查，我请赛普拉斯记录了.alert元素的高度。 cy.log报告高度为34px，这是正确的。检查员报告高度为60px。这里发生了什么？

```

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

```

此外，由cy.screenshot（）生成的图像太疯狂了！警报栏的高度似乎超过了80px，这完全是胡说八道。

Answer 1

我不认为这本身就是一个错误。我们正在采用一种响应式设计方法，该方法是更改body标签上的基本字体大小。似乎赛普拉斯无法按照我们实现的方式基于断点重新计算：

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

赛普拉斯报告元素尺寸错误

1 个答案: