iOS Chromeでresizeイベント後にwindow.innerWidth/innerHeightが異なる問題に対するワークアラウンド

現象

iOS端末を回転させてwindow sizeが変わって、resizeイベント後にwindow.innerWidth/innerHeightを参照しても、実際の値と異なる

例えば画面を横から縦に変えた場合、widthは合っていますが、heightは異なる値を示しています

bugs.webkit.org

環境

• iPadOS 14.4.2
• Google Chrome 87.0.4280.77

解決案

※ どうしてもiOS Chromeでresizeしたときに実際のwindow.innerWidth/innerHeightが使いたい！ときに試す

1. 画面全体を覆うダミーのdivを置く
   position: fixed とか 100vw, 100vh とか
2. ダミーのdivをResizeObserverで監視して、divのwidth, heightを使う

Percyをsnapshotを取らずに使いたい場合

モチベーション

• PercyのSDKに存在しないフレームワークを使用している

  • https://docs.percy.io/docs/sdks

• レスポンシブデザインをJavaScriptで頑張っている場合

  • PercyはDOMのスナップショットを取得して、それをもとにレスポンシブのテストを行っている。そのため、htmlの状態で幅を変えてもJavaScriptが動作しないため、レスポンシブな動きをしてくれない
  • テストフレームワークの方で、幅をリサイズしながらスクリーンショットを撮ればできそう
    • https://docs.percy.io/docs/responsive-visual-testing#how-it-works
  • ちなみにenable-javascriptというプロパティがあり、これをtrueにするとJavaScriptが動作するが、SPAの場合は…、ね
    • https://docs.percy.io/docs/cli-configuration#snapshot

• Percyで提供されてないブラウザで差分を取りたい

  • もうほかのサービスを使おうよ

方法

percy-cliを使い、画像のアップロードのみを行います

Reactの仮想リストライブラリを調べたときのメモ

まとめ

• Slackのような仮想リストを実現するのは難しい
• いずれのライブラリも上方向へのスクロールは難しい
• 普通に使う分には、react-virtuosoはいいぞ

WebdriverIO

github.com

作業ログです

QA Wolf

github.com

作業ログです

TestCafe

github.com

作業ログ

Introduce playwright

github.com

作業ログです