Cypressでテストするときだけstyleを適用したい
例えばビジュアルリグレッションテストを実行する前に、無視したい要素を非表示にしたい、みたいなことがあると思います
私の場合はtooltipを含むボタンを押すテストで、まれにtooltipが表示されてボタンを押せないことがあったので、Cypressを実行しているときはtooltipを非表示にしたいということがありました
できたコードはこちら
Cypress.on('window:load', window => {
const style = window.document.createElement('style')
style.textContent = '適用したいスタイル'
window.document.head.append(style)
})
window:load、つまりページが表示されたタイミングでheadにスタイルをinjectできました
これをsupport fileとして読み込むことで、Cypress実行中にスタイルが当たるようになりました
