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

作業ログです

手になじむE2E Testing Frameworkを探して

github.com

Getting Startだけさわるとよさそうに感じるけど、実務で使っていくと要素が取れなかったり、データ取得を待てなかったり、CIで回すとランダムフェイルしたりと苦労します

そこで実際のWebアプリに近いもので同じテストを書いてみて使い勝手を確かめていきます