search

meinaart / cypress-plugin-snapshots

Plugin for snapshot tests in Cypress.io
MIT License
489 stars 116 forks source link

(bug) image snapshot error when the page has fixed element in chrome headless mode #147

Closed candy-Tong closed 3 years ago

candy-Tong commented 3 years ago

Describe the bug My page has a fixed header. There are some error when I use image snapshot in chrome headless mode. image The part of fixed element is repeated. When test in chrome headed mode, It is ok.

To Reproduce Steps to reproduce the behavior:


context('antd', () => {
    beforeEach(() => {

    })

    it('list', function () {
        cy.visit('https://preview.pro.antdv.com/list/table-list')

        // login
        cy.get('#username').type('admin')
        cy.get('#password').type('admin')
        cy.get('#formLogin > div:nth-child(3) > div > div > span > button').click()

        // modify the setting, and make the header fixed
        cy.get('.ant-pro-setting-drawer-handle').click()
        cy.get('div.ant-drawer.ant-drawer-right.ant-drawer-open div.ant-drawer-content-wrapper div.ant-drawer-content div.ant-drawer-wrapper-body div.ant-drawer-body div.ant-pro-setting-drawer-content div.ant-list:nth-child(5) div.ant-spin-nested-loading div.ant-spin-container ul.ant-list-items li.ant-list-item:nth-child(2) ul.ant-list-item-action:nth-child(2) li:nth-child(1) > button.ant-switch.ant-switch-small').click()
        // close the setting
        cy.get('.ant-pro-setting-drawer-handle').click()

        // change the page max number. Make the page content exceed the screen height
        cy.get('#app > section > section > main > div > div > div.ant-pro-page-header-wrap > div.ant-pro-grid-content > div > div > div > div.table-wrapper > div.ant-table-wrapper > div > div > ul > li.ant-pagination-options > div.ant-select.ant-select-enabled.ant-pagination-options-size-changer > div > div > div')
            .click()
        cy.get('section.ant-layout.ant-layout-has-sider.ant-pro-basicLayout.screen-xxl section.ant-layout.sidemenu main.ant-layout-content.ant-pro-basicLayout-content div.ant-pro-basicLayout-children-content-wrap div.ant-pro-grid-content div.ant-pro-page-header-wrap:nth-child(2) div.ant-pro-grid-content div.ant-pro-page-header-wrap-children-content div.ant-card div.ant-card-body div.table-wrapper div.ant-table-wrapper div.ant-spin-nested-loading div.ant-spin-container ul.ant-pagination.ant-table-pagination li.ant-pagination-options:nth-child(10) div:nth-child(1) div.ant-select-dropdown.ant-select-dropdown--single.ant-select-dropdown-placement-bottomLeft div.ant-select-dropdown-content ul.ant-select-dropdown-menu.ant-select-dropdown-menu-vertical.ant-select-dropdown-menu-root > li.ant-select-dropdown-menu-item:nth-child(4)')
            .click()

        cy.wait(3000)

        cy.get('#app > section > section').toMatchImageSnapshot()
    })
})

Expected behavior The part of fixed element is not repeated.

Desktop (please complete the following information):