UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Cypress】full screenshotとる場合のstickyfillの扱い

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)