Cypressでfull screenshotを指定した場合、viewport分スクロールをしてスクリーンショットを撮り、それを繋ぎ合わせる
そのため、position: fixed
またはposition: sticky
のコンテンツが最終的なスクリーンショットに複数回表示されることになる
これを制御する方法を調査した
公式ドキュメントは以下
https://docs.cypress.io/api/commands/screenshot.html#Full-page-captures-and-fixed-sticky-elements
これを防ぐためには、スクリーンショットの前にプログラムで要素をposition: absolute
のように変更しておき、後で元に戻すことをする
やり方は以下
cy.get('.sticky-header').invoke('css', 'position', 'absolute') cy.screenshot() cy.get('.sticky-header').invoke('css', 'position', null)