tmegos blog

I love school idols / Web developer

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実行中にスタイルが当たるようになりました

参考

Cypress - Inject Percy-specific CSS · GitHub

docs.cypress.io