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

[Hiroshiba]

内容

UIのend to endテストが書けるようになりました！！！

• electron非依存でe2eテストを動かせるようにする #1418

READMEにも書いていますが、Playwrightを使ってテストコードを自動生成することも可能です。
ということでいろんなテストをかけると嬉しそうなのでissueを作成してみました。

一気にいろんなテストを実装しちゃうと問題があった時に大変なので、何か一つのテストがかけたら1回プルリクを出すというのを最初の方はお願いできると助かります！

たぶん自動生成するにしても結構いろんなコツが必要だと思うので、その知見をここに集められると楽しそうです。
何かわからない点とかがあれば何でもコメントしてください！

Pros 良くなる点

追加実装を安心して行えるようになる

Cons 悪くなる点

テストの書き方がまだ定まってない

実現方法

READMEに書いてあります。
例えばこういうテストがあるといいかも？

• 難度低め
  • 辞書ダイアログが表示できる
  • デフォルトスタイル選択ダイヤルが表示できる
  • キャラクター並び替えダイアログが表示できる
  • ヘルプダイアログの各要素をクリックすると内容がちゃんと表示できる
  • メニューバーをクリックすると内容を表示できる
• 難度中
  • パラメータ欄のパラメータがスライダー移動・直接入力で指定→パラメータが変わっていることを確認
  • ツールバーのカスタマイズからボタンを追加→ツールバーにボタン追加されてることを確認
  • テキスト欄追加ボタンを3回クリック→テキスト欄が4個になっていることを確認
  • テキスト入力→アクセント欄でアクセント区画の分割→アクセント区画が増えていることを確認
  • アクセント欄のスライダークリックやマウスホイールでパラメータを変更できる
  • パラメータの引き継ぎをオン→パラメータ指定→テキスト欄追加→パラメータが引き継がれていることを確認
  • パラメータの引き継ぎをオフ→パラメータ指定→テキスト欄追加→パラメータが初期化されていることを確認
  • undo/redoのテスト。undoで戻れる、redoで進める、途中までundoして別の操作をしてもちゃんと履歴がある。
  • undo/redoボタンのUIテスト。初期状態でどちらも不可、最新状態だとredo不可、最古状態だとundo不可。
  • アクセント欄の読みの部分をクリックすることで読みを変更できる。
  • イントネーション欄の「シ」や「ク」などの読みをクリックすると無声化できる（スライダーがdisableになる）。「ア」などはできない。
  • イントネーション欄でスライダークリックやマウスホイールでパラメータを変更できる
  • イントネーション欄でAltを押しながらスライダーを変更するとそのアクセント区のパラメータを一斉に変更できる
  • 長さ欄でスライダークリックやマウスホイールでパラメータを変更できる
  • 長さ欄でAltを押しながらスライダーを変更するとそのアクセント区のパラメータを一斉に変更できる
  • 長さ欄で子音と母音がある読みはスライダーが2つ分割して表示され、それぞれ別で変更できる
• 難度高め
  • なんらかのテキストを入力→音声合成→テキストに含まれる単語を辞書登録で読み変更する→テキストが変わっていることを確認
  • 音声書き出ししても.labファイルが書き出されないことを確認→.labを書き出すように設定を変更→音声書き出しして.labファイルも書き出されていることを確認
  • テキスト欄追加ショートカットキーが正しく実行される（ショートカットキー入力をエミュレートする関数の実装が必要）
  • ドラッグアンドドロップでテキスト欄が入れ替えられる（ドラッグアンドドロップをエミュレートする必要がある）
  • ショートカットを変更できる

スナップショットが必要なタスク

• フォントを変えれば見た目も変わる
• ライトモード・ダークモードが設定できる（もしかしたらブラウザ版など現状できないかも）
• 各パネルのサイズを変えられる。キャラクターパネルのみほぼサイズを0にできる。

その他

辞書登録済みかどうかなどの状態が各テストをまたいでしまうので、物によってはリセットするための機構が必要かも

[stmtk1]

メニューバーをクリックすると内容が表示されるテストに関しては別のe2eテストを実装した際にテスト内容がかぶるのであえて実装しませんでした。
現在実装されてないテストでこういうテストがほしいなどがあれば別途書きますね。

[Hiroshiba]

ありがとうございます！！！
テストの実装状況を反映し、さらに追加もしてみました！もう思いつくのは結構難しくなりつつあります。。

他にも確かスナップショットテストができて、画面が正しく表示されているかを画像ベースでチェックできる機構がPlaywrightにあった気がします！！
これに挑戦してみても面白いかも？ https://zenn.dev/toono_f/scraps/2368d03dacca93
（OSごとに微妙に表示が違うのでとりあえずWindowsだけで実行とかになるかもですが）

[stmtk1]

了解です。スナップショットのテストをしたいので、Windowsの実機で撮った画像をいただけますか？

[Hiroshiba]

あ、とりあえずWindowsでなくても１つのOSで良いかなと思います！
先程の記事を見るに--update-snapshotsをつけて実行すると画像を作れそう・・・？
公式ドキュメントはこのあたりかな　https://playwright.dev/docs/test-snapshots

[thiramisu]

可能な範囲でマウス操作とキー操作の2通りで確認できると良いかもですね。
（音声・ファイルIO周り以外のショートカットキーは難易度中相当？）
ちなみにこんなバグがありました。

• fix: 連続再生の停止がキーでは出来ないバグを修正 #1533

キーボード入力自体は以下でできそうです。
https://playwright.dev/docs/api/class-keyboard