e2eで画面スナップショットテストする際のエンジン差異をどうするか

[Hiroshiba]

内容

スクショのスナップショットテストがあるとUIの見た目もテスト書けそうです。
Playsrightなどには画面のスナップショットテスト機能が備わっているので、仕組みは単純に作れるはずです。

ただ、エンジンが異なるとスナップショットが変わってくるという既知の課題があります。
これをどう解決すべきかをまとめていくためのissueです。

Pros 良くなる点

スクリーンショットでスナップショットテストが書ける

Cons 悪くなる点

エンジンの差異の九州方法を考える必要がある。

実現方法

手はパッといくつか思いつきますが、どれもこれも一長一短です。

• CIはNemoで動いているので、スナップショット更新時は同じようにNemoで実行してもらう
  • スナップショット更新時はNemoをインストールしてもらう必要がある
• エンジンごとの差異となる部分の画像を隠す
  • 立ち絵・アイコン・名前など多岐にわたるので結構たいへん
• エンジンごとの差異となる部分をモックにする
  • ↑と同じ箇所を隠蔽するので大変かも
  • 意外と妥当そう･･･？
• モック版エンジンバイナリを作る
  • エンジン側のenable_mock版をビルドできればできはするが、開発者の手間的にはNemo使うのと正直あまり変わらない

その他

@sevenc-nanashi さんのご意見で課題に気づきました、ありがとうございます 🙇

関連しそうなissue

• UIのe2eテストを大量に実装する #1462

[sevenc-nanashi]

https://playwright.dev/docs/network#modify-responses
軽く調べたところ、Playwright側でネットワーク通信に割り込めるようです。
「エンジンごとの差異となる部分の画像を隠す」（= GET /speakers、GET /speaker_info、GET /engine_manifestあたり？）、が良さそう？

[Hiroshiba]

なるほどです！！！
electronテストの場合はプロセスが違ってもしかしたら難しいかもですが、少なくともbrowserテストの場合は確実に割り込める気がしますね！！

/engine_manifestが必要になるのはたぶんマルチエンジンからなので、大体のスナップショットテストは通信書き換えでOKな気がしました！

[sevenc-nanashi]

main...sevenc-nanashi:add/mock-speakers
試作してみました。

https://github.com/sevenc-nanashi/voicevox/actions/runs/7408052078/job/20155498023

Windows/Macでのスクリーンショットをどうするか悩みますね。どうやらPlaywrightはWindows/Mac/Linuxで別のスクショを撮るらしく、それらのマシンを持ってない人もいるのでうーんって感じです。（色々試してます）

追記（2024/01/04 19:55）：

MacOS

Windows

差分です。MacのMenuBar周り、OS毎のアンチエイリアスの差で色々と面倒そうです。 一定の割合未満なら許可、みたいな設定もできるっぽいのでそれを使うのもアリ？

追記（2024/01/04 22:50）：
[update snapshots]をコミットメッセージに入れるとGitHub Actionsが良い感じにコミットしてくれるようにする、で色々やってます。（[skip ci]のノリ）

[Hiroshiba]

おーーーーーーーーすごいですね！！！！！！！！！
アンチエイリアスの有無まで再現できるの、なんか逆にすごいですね。（いやOSが違うから当然か。。）

Discordで出た案のメモ転機。
LinuxのみにしてGithub Actionsでupdateできる方法を提供したり、dockerでアップデートしてもらったりなどがありそう。

[sevenc-nanashi]

良い感じにコミットしてくれるようにできました。（Change: 検出方法を変更のコミットの説明欄に「[update snapshots]って書いてます）

[Hiroshiba]

おーすごい！！！！！
forkした後にGithub Action許可してもらえばもう使えるって感じでしょうか。とてもいい！！！！

[Hiroshiba]

@sevenc-nanashi さんがe2eテスト時にモック用の画像に差し変わるコード書いてくださいました！！
ということでクローズ！！