ep.41 「見かけ」倒しではない Visual Regression Testing の魅力と難しさ | UIT INSIDE

2020/05/01 に公開1788 views

このエピソードについて

@spring_raining と @harumitsu.fujii が、ビジュアルレグレッションテストを導入した時の話や困りごと、今後のE2Eテストへの期待について話しました。

「LINEのお年玉」での導入事例

https://engineering.linecorp.com/ja/blog/visual-regression-otoshidama/
あるページにアクセスしたときのスナップショットを撮影し、期待した内容と異なっていないかを自動的に確認する
タイトなスケジュールのあいだ目まぐるしく変わる仕様やデザイン修正の中でも、意図しない副作用がないかを確認することができた

「LINE公式アカウント」での利用例

LINE公式アカウントのCMSで、アイコンを変更したときにどの箇所が変更されたか、レイアウト崩れが起こっていないかを確認したかった
ページ数は多かったが、ほとんどのページで確認作業を自動化することができた

ビジュアルリグレッションテストを通してわかった課題

実行環境・デバイスの問題
- ブラウザ・解像度の違いでテストが失敗するケース
- Playwright という選択 https://github.com/microsoft/playwright
テスト実行時間の問題
- ある操作を待つために決め打ちで時間を入れていると、テスト数に比例してテスト実行時間が増えてしまう
  - Puppeteer であれば、networkidle0 などでネットワークのコネクション数を監視
- CI 上でテストを並列に実行して、少しでもテスト実施にかかる時間を短縮
テストの外形操作の問題
- ある DOM 要素を CSS Selector のみで指定することの難しさ
- ページ中の座標を指定する方法も
- Cypress は data-cy attribute で指定することを推奨 https://docs.cypress.io/guides/references/best-practices.html
アニメーションなど実行時に毎回UIが変化してしまうケース

E2Eテストの今後

E2Eテストが普及しないのは、正直環境構築やテストの記述が面倒というのが理由？
- 一方で、実はユニットテストと比べると手間自体は少ない
アプリが完成すると自動的にE2Eテストスイートが完成していることが理想
クロスブラウザで、どのようなテスト環境でも用意できるとうれしい

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
こんにちは

Guest 00:01
こんにちは

Guest 00:03
え。それでは、今週もわいインサイドやっていきましょう。

Guest 00:07
UIT INSIDEは、ユーザーインターフェースと、テクノロジーを愛する開発者のためのポットキャストです。

Guest 00:14
最新のウェブ標準はもちろん開発、フレームワークの変遷や

Guest 00:18
uyxに関することまで、様々なフロントエンドの情報をキャッチアップできるポットキャストをお送りしております。

Guest 00:27
twitterでの拍手タグはシャープuyt、アンダースコアインスタイド、

Guest 00:32
エピソードのご意見やご感想、リクエストなどもぜひぜひご気軽にツイートしてください。

Guest 00:39
今回はですねパーソナリティは私、玉田とえ、同じく、ティ所属の藤井さんを今回はお招きしてお送りしたいと思います。

Guest 00:49
それでは藤井さんよろしくお願いします

Guest 00:51
はい、よろしくお願いします。

2. 自己紹介 00:54

Guest 00:54
それでは、今回itインサイド、初参加の藤井さんにと自己紹介をしてもらいたいですよろしいでしょうか。

Guest 01:02
はい、UIT室に所属しています藤井と申しますと、私は2016年の8月にえ入社しまして、それ以来とま主に、

Guest 01:11
LINE内で動作する。ファミリーサービスのウェブフロントエンドの開発に携わってきました。

Guest 01:17
で、それ以外にもとラインアップのcmsの開発なども開発に携わっています。はい、よろしくお願いします

Guest 01:24
はい、よろしくお願いします。今日と藤井さんにえ、お伺いするビジュアルレグレッション

3. 「LINEのお年玉」での導入事例 01:25

Guest 01:30
のテーマについて、ちょっとお話しいただきたいと思います。と、藤井さんはえ、去年の年末にとLINEのお年玉のまあ、プロジェクトに携わっておりましてと、そのUIT作業をされておりました。

Guest 01:43
でと、まあ、その内容はとエンジニアブログにも結構詳しく紹介されているんですけども、

Guest 01:50
改めて、そのLINEのお年玉のえー内容について、ちょっとご紹介いただけないでしょうか。

Guest 01:55
はい、ラインのお年玉は、毎年年末年始に行なわれてるキャンペーンでして、今年で4年目の実施となります。

Guest 02:03
うっとま、案件の特徴としては、毎年非常にタイトなスケジュールの中でと、スピードを重視した開発が求められるような案件となっています。

Guest 02:11
あ、じゃ結構割とそうですね、結構LINEとしては、珍しく、すごい締め切りがもう絶対動かすですね。

Guest 02:19
あの、もう1月1日のはリスがもう確定してるので、そうです。まあ、もう何が何でもそこに間に合わせないといけない、はいていうような案件になってますね。はい、

Guest 02:29
結構じゃあ、スピード重視で開発されているっていうことですね。そう

Guest 02:33
ですね、

Guest 02:34
はい、結構なんかあのスポット的な。あの、まあ案件になるんで、コードのリダビリティよりも、まあ、あのスピードを重視した。はい、開発をま毎年してるっていうような感じになってます。はい、

Guest 02:46
なるほど

Guest 02:47
で、そのLINEのお年玉のまあ、開発を進めていく上で、今年の開発では、ビジュアルレクレッションのテストを導入されたということなんで

Guest 02:57
ですけどもままず、ビジュアルリグレッションのテストについて、ちょっと紹介してもらえないでしょ。

Guest 03:02
はいと、ビジュアルレグレーションテストっていうのはとま、画像をベースとしたテスト手法でして、あらかじめあの正解となる画像を用意しておいて、

Guest 03:12
それと、実際にアプリケーションを実行した際の

Guest 03:15
えと、スナップショットを撮影して、ま。それら2つの画像の画像を、ピクセル単位で、まあの色情報を比較していくっていうものになります。

Guest 03:23
そのピクの情報に差分があるとま、それをあの視覚的に分かり易い形で、まどこに差分があるのかっていうのは、分かり易い形で、

Guest 03:31
まエラーとして出力してくれるみたいなテストになっています。

Guest 03:34
そうですね、ビジュアル、リグレッション、

Guest 03:36
結構その色差っていうのをちょっとま言葉だとわかりづらいかもしれないんですけど、もま、画像はあの後で小のにはい

Guest 03:45
として、2つのえ、パターンの画像を比較して、まあ、差分があったところをこう赤く強調するみたいな感じで、今回は

Guest 03:53
見れるっていう形になってるんです。そうですね、じゃ、結構なんて言うんですかね、なんなんかこのスピード重視っていう。はい、そうですな。開発とこのビジュアル、レグレーションテスト。結構

Guest 04:03
矛盾してるなって最初思ったんですけど、なんか導入を決めたきっかけみたいなのってあったりしますか。

Guest 04:09
そうですね、一応ま導入の経緯としては、あのこの案件の特徴としては、あの、ほんとにもうリリース直前まで、あのいつも使用の変更とか、あと、デザインの変更というのが行われていて、

Guest 04:19
で、まあ、どこかあの行動を修正するたんびにま、他のページでまデグれが起きてないかっていうのをま確認する必要があると思うんですけど、他のページっていうのが、そのランディングページのパターンていうのがまも凄い多くてですね。

Guest 04:31
あのま、今年だのケースだと多分数十ぐらいランディングページの

Guest 04:36
パターンというのがあって、まあ、去年とかだともう100ぐらいあったんですね。で、それをま全て目視で確認するっていうのは、ちょっと現実的じゃないっていう。まあ、そういう

Guest 04:45
事情があって、その辺のま確認作業をま自動化したいっていうのが、元々のモチベーションでした。はい、

Guest 04:51
ああ、なるほど、はいはいはいま、それはそうですよね。なんか、

Guest 04:55
結構そのページ数が多いっていうところと、なおかつ時間が限られてるっていうことは、

Guest 05:02
やっぱりこういうテストをまあ、自動化というか、まあテストを導入するっていうことがま、大事

Guest 05:07
日だった。はい、そうですね、

Guest 05:08
はい、じゃ、結構割と時間の短縮とかみたいなのは達成できたんですかね。リアルレクレーションテストでそう

Guest 05:15
ですね、ま目しで、その数十パターンを毎回はい、確認しなくて済んだんで、

Guest 05:20
ま、そこはあのまあ時間の短縮につながりましたし、まあ、実際にその自動化、あのテストを自動化したことによって、まああのデフレを発見できたっていうのもあったので、ま、結構効果はあったのかなと思っています。はい、

Guest 05:32
あ、じゃあもう普通に導入して、時間が短縮できた

Guest 05:37
そうですね。はい、

Guest 05:38
うん、なるほど、ありがとうございます。

4. 「LINE公式アカウント」での利用例 05:41

Guest 05:42
藤井さんのこのビジュアルレグレッションの試みについて、実は私もあの、その開発途中はとの認知していなくて、そのエンジニアブログを読んで、初めて私も知ったんですけども、うんうん。実はその

Guest 05:55
タイミングで、僕も全く違うプロジェクトなんですけれども、似たような。そのビジュアル、レグレーションテストみたいなのを手元で開発していて、結構同じことをやってたっていう。

Guest 06:06
そうですね、あの、隣に座ってるけど、全然同じことをやってることに気づかずに、

Guest 06:11
数ヶ月間作業していたっていう、そんな感じでしたね。そうなんですね、

Guest 06:17
あの、私、藤井さんの隣の席なんですけれども、その隣に座ってたのに、全然

Guest 06:23
やってる子と同じなのに、全く把握してなかったっていう。そうですね、ちょっとちょっと反省しましたね、話をこれか

Guest 06:32
そうですね、まあ、仲が悪いってわけじゃないんですけど、まあそんな感じでしたね。使ってるライブやりとかも全く同じだったので、

Guest 06:39
結構開発プロジェクトが違うっていうこともあって、なかなかきっかけがなかったんですけど、そうですね、まあ、はい

Guest 06:48
で僕のやったことっていうのをあ、軽く紹介しますと、僕も

Guest 06:53
そのビジュアルレリューションを導入した経緯としては、LINEの公式アカウントのcmsを開発してるんですけど、もまそこで使用しているアイコンを。全体的にそのデザインをリファインするという

Guest 07:05
プロジェクトを以前進めていまして、ま、そこで、アイコンをこう一気に変えた時にどうなるかっていうのを確認するっていう。まあ、作業が必要になりました。

Guest 07:15
で、結構そのページ数もまあ100はあるはずなので、結構

Guest 07:20
なんて言うんですかね。まあ、全く同じ目視で確認するっていうのがまあかなりうん、大変っていう。まあ、課題があったので、私もまあ同じような感じでこう。ビジュアルブレーション

Guest 07:30
のまあ、コードを書いてま2つのスナップショットを比較するっていうことをやりました。で、ですね、ま、

Guest 07:37
結構LINEのお年玉だと、そのテスト形式でま、そのなんて言うんすかね。行動の変更によって、こう比較するみたいなことを

Guest 07:47
やっていたんですけども、私の場合だと、あそこまでもうほんとに手元で確認するよみたいな感じ

Guest 07:53
じて開発していて、そのcliでまパペッターをキラして、画像をまぜこかえへページを確認して、で、スクリーンショット撮るだけっていううん、ソースコードを書きました。

Guest 08:04
で、あの藤井さんのそのお年玉のランディングページのスナップショットとは、チョット違っていて、例えばこのページにたどり着くためには、このボタンをクリックして、このフォームに

Guest 08:15
テキスト入力してクリックしないといけないみたいな。こううん、普通ステップ

Guest 08:20
踏んで行かないとたどり着けないようなページとかがあったりしたので。なるほど、ま、そういったものをなんて言うんですかね。やるで

Guest 08:27
こう定義してこう人間がこう、そのこのボタンをクリックしてくださいっていうこう指示を出せるような形で、ま、今回はちょっと省力化を図ったっていう感じですね。

Guest 08:38
なるほど、なんか、そのページ遷移する際に、なんかその数秒待みたいなま、そういう処理とかも入れたりしてた感じですかね。とが更新される

Guest 08:47
そうま、もうちょっと。その内容を具体的に示すと、各そのページのま、アクセス時にcssセレクター形式で、まこのボタンをクリックみたいなっていうのをこう

Guest 09:00
やで、列挙して、はいはいでで。まあ、スナップショットを取るっていう感じになっていて、各クリックごとに3秒ぐらい待ってこううん、うん、うん、スナップショットを取るみたいな。

Guest 09:12
なるほど、

Guest 09:13
感じにしましたね。はいはい、なんで、結構最終的にスナップショット数200ぐらいは

Guest 09:21
だと思うんですけど、もま、それをこう後で、その人間が画像を確認するだけでま変化を確認するっていうことができるようになった。うんていう。

Guest 09:31
そうですね、私も結構これで助かりましたね。

Guest 09:35
うん、

Guest 09:35
そうですよ、

5. ビジュアルレグレッションテストを通してわかった課題 09:37

Guest 09:38
この私たち2人ともその同じ時期にそのビジュアル、リグレッションテストを実装する。え、適応するっていうことを

Guest 09:48
やったんですけれども、まあ、多分そのいいところだけではなくて、結構辛いところも

Guest 09:55
お互いあったんじゃないかなっていうところもあると思うんで、ちょっとそのあたりをこうは紹介していきたいなと思います。はい、で、

Guest 10:05
まずそうですね、私が結構課題だなと思ったのは、実行環境が

Guest 10:12
今のところまパペッタパペティアなので、クロミウムが基本的な環境みたいな感じ。

Guest 10:20
うんなってしまっているっていうところですね、これは、確かに藤井さんも同じですか。そう

Guest 10:26
ですね、これそうですね、私もクロミウムでやってたんですけども、確かになんかそのクロスブラウザーでこうテストができると、まあ結構

Guest 10:36
あのまテストでカバーできる範囲が広くなって、まあ、うん、いいなっていうのは、まあ確かに自分も感じました。はい、

Guest 10:44
そうですね、特にLINEのお年玉だと、ま、そもそもLINEのアプリないブラザー。

Guest 10:51
そうですね、

Guest 10:53
そこで確認したいっていう気持ちはそうですね、ただ、その今最近だとプレイライトっていう

Guest 11:02
ライブやりがありまして、これとかだと、実はルーキットとfirefoxにも対応してるという。

Guest 11:09
ああ、なるほど、これを使えば。じゃあ一応クロスブラウザンテストができるって感じなんですね。

Guest 11:16
ああ、そうですそうですあのパピティア確かァイfoxに対応し始めていて、ええ、結構

Guest 11:25
割と競合みたいな感じで、うん、お互いを高めていってほしいという。

Guest 11:33
そうですね、どんどん良くなってもらえるといいですね。はい、そうそう

Guest 11:37
なんで、1回プレイライトを使って書いてみるのもいいかもしれない。

Guest 11:42
うん、そうですね、1回ちょっと試しに書いてみて、どっちがいいのかっていうのを確認してみるのがいいかもしれないですね、

Guest 11:50
ブログにしてください、

Guest 11:52
時間があれば

Guest 11:54
お願いします。はいはい、もう1つはテストの実行時間がこうどんどん

Guest 12:02
増えていってしまうっていう問題も結構深刻だなと思いました。うん、その私もそのcmsのスナップショットを全て取るのを待つために、結構な10分も待ったりとか。しかも、手元のpcで

Guest 12:16
うん動かしていたので、すごいめっちゃファンが

Guest 12:20
まうるさかった、

Guest 12:22
うるさかったみたいな。はい、なんで、結構そ。ページ数に比例して、時間が増えるっていうのは、かなり困ることではあるんですけど、こここも

Guest 12:32
困りましたよね。富士山も。

Guest 12:34
はい、私もこれは結構なんか最初の段階から結構あの気にしていて、

Guest 12:40
でま。確かにそのテストケースの数が増えると、ま、それに比例して、どんどんあのテストの実行時間ていうのが

Guest 12:47
どんどん膨らんでしまうんで。あのま、今回あのLINEのお年玉では、あのci上でテスト

Guest 12:53
実行してたんですけども、テストの実行できるだけあの並列化して実行できるように、あの試合上で

Guest 13:00
まあのまジョブを幾つかに分けてま。できるだけ並列に実行するようにして、まあ、少しでもあのテスト時間

Guest 13:08
を短縮するっていうことをしてました。はい、

Guest 13:11
あ、ですよね、結構もう数で殴るっていうか、そうですね、

Guest 13:15
あ、そうですね、ま、ジョブをたくさん作るみたいな

Guest 13:18
感じでやってました。なんか、た田さんの場合だとあれですよね。なんか、セットタイムアウトとか入れて、3秒間待つみたいなのを結構

Guest 13:28
そうそうです。そうですや、

Guest 13:30
それも結構大きな問題でして、ボタンを押してから、すぐに遷移できるとは限らなくて、結構うん、待たないといけなかったり。

Guest 13:40
しかも、それはそのタイミングによって、なんかこうまたり、またなかったりみたいな感じなので、なかなかこう時間を読むのが

Guest 13:48
難しかったりしてま。結局こう長めに見積もって、全部賛同みたいなん

Guest 13:57
たので、

Guest 13:58
そういう行動がどんどん増えると結構きついですよね。

Guest 14:02
そう。しかも、このタイミングで、次のステップ実行みたいなのって、なかなか外からは分かりづらいところなので、うん、結構

Guest 14:11
困りましたね。うん、

Guest 14:14
なんか私もあのまあちょっと似たような話で。あの、

Guest 14:18
まあ、今回あのLINEのお年玉では、あくまで、そのランニングページのテストしかしてなかったんで、またまさんが今おしゃれたみたいに、なんかある。エレメントクリック

Guest 14:27
した時に、まそのドムの更新を待つために、なんかセットタイムアウト3秒みたいな。なんか、そういう行動はま書いてなかったんですけど、も。はい、そのランディングページ

Guest 14:36
が表示されたタイミングっていうのを検知する必要があって、それをま元々あのたまさんがおっしゃってたみたいに、セットタイムアウトでやってたんですね。

Guest 14:46
ただ、なんかあの後でちょっと調べて分かったんですけど、なんか、ペパティアのナビゲーションするapaいくつかあると思うんですけど、

Guest 14:54
まああいうAPIのオプションに、ウェイトアンティルっていうま、オプションを指定することが

Guest 15:00
できて、ああ、はいはいで、そこになんかあのまあブラウザが発火する。なんか、ドムコンテトローデットとかま、ロードみたいなイベントを指定することができるんですけど、

Guest 15:09
ま、なんかそれ以外にもあのまいくつか指定できるものがあって。で、今回、あのLINEのお年玉では、ネットワークアイドル0っていうオプションを指定してました。

Guest 15:19
で、これは何かって言うと、あのま、500ミリ秒の間と、ネットワークコネクションが1つもなかった場合に、おナビゲーションを終了したと見なすみ

Guest 15:28
みたいなま、そういうオプションなんですけど、ま、これを指定するしたんですね。で、一応数か月間これで運用したんですけど、ま、ここが原因でテストが失敗したことはま一度もなかったんで、ま、結構うまく運用できたかなと思ってます。はい、

Guest 15:42
ああ、なるほどうんあ、そっか。ネットワークキーだと、もう普通にそのネットワークアイドル0。そうですね、はい、これしかも500ミリ秒待ってくれる

Guest 15:51
そうです。そうです、

Guest 15:52
これ以外にも、なんか他にもいくつかあって、なんかなんだっけな。ネットワークアイドルなんか、1とか2とかっていうのがあって、それだと、500ミリ秒の間にネットワークコネクションがなんか

Guest 16:02
1つか2つになったら、ナビゲーションを終了したとみなすみたいな、そういうオプションもなんかあるっぽかったです。はい、

Guest 16:08
あ、それは知らなかった

Guest 16:11
そうですね、普通にネットワークを待つっていうことが、多分大半ですよね、普通にこれで

Guest 16:18
まそうですよね、はいた田さんのケース、もしかしたらこれでいけるのかもしれないですね。わかんないですけど、

Guest 16:26
いや、いけそうな気が。

Guest 16:28
おお、ありがとうございますはい、あとは、ボタンをその今回クリックするみたいな指定を

Guest 16:36
してあげてたと思うんですけども、ちょっとそのやのファイルとかを見てもらうと、結構そのセレクターが

Guest 16:44
うんの内容がひどいことになっていて、うん、このこの要素の何番目の隣の隣のこれの子孫みたいな、そういう

Guest 16:55
感じで、割となんとかしたいなっていう気持ちがありましたね。結構確かになんていうん、

Guest 17:02
結構ドームの構造が変わっちゃうと、なんかセレクター効かなくなっちゃいます。あ、

Guest 17:06
そうそうなんですよ、すごい変化にすごい弱くなってしまうっていう、すごい大問題が起こってしまう

Guest 17:14
で、もう1つ結構今ならではの理由だと、その確かcssインジェースとかで、結構くらcssのクラスを

Guest 17:24
次で指定するっていうことがなくなり、つつあったり、

Guest 17:28
うんするんですよね。結構そこがそこだと、例えば、まあ普通に人間がこうクラス名押してしてあげれば、まあ、

Guest 17:37
こう。このドム要素っていうのが指定できたのが、そのほんとにそのcs

Guest 17:44
スンジェースでこう作られた自動的に作られ、たまクラス名とか、

Guest 17:48
うん、トップスみたいなのを指定するっていうことになってしまうので、うん、ほんとに何かのきっかけで構造が変わったりとかっていう

Guest 17:57
だけで、全てそのステージが無駄になってしまうみたいな。うん、難しさもなんか起こりそうだなっていう気持ちが確かに

Guest 18:07
ありました。

Guest 18:08
なんか、テスト用のなんかidとかクラスその専用のクラスで振るとか、なんかそういう感じ。

Guest 18:14
ああ、そうそうなってしまい、やるか、

Guest 18:16
それ以外にもなんかあのテパティアの機能で、あのはいなんだっけ。

Guest 18:23
まあ、なんかその画面上のなんか座標を指定して、そこにあるあの要素をまくり、あ、はいはみたいな。なんか、そういうことも一応できるらしいんですけど、

Guest 18:32
ま、それはそれでなんかそのなんて言うんすかね。ページのデザインとか変わってしまうと、ま、テストを更新しないといけないんで。

Guest 18:40
まあ、そうですね、それもそれであんまりメンテナンス性が良くないんで、超一端な感じはありますね。

Guest 18:46
それ、それを全然ありだとは思うんですけど、結構割と

Guest 18:52
なんて言うんですかね。思想的な問題もありそうだなっていう、なんか、ほんとにその見た目だけのテストなら、ここに僕のボタンがあるはずだっていうことは

Guest 19:03
わかっているはずですので、うん、そのことも座標で指定してあげるみたいな戦略もわりなのかも。

Guest 19:11
うん、

Guest 19:12
うん、うん、

Guest 19:13
そうですね、一応なんかそういうアプローチも一応ペパチアは提供して、はいはいようですね。はい

Guest 19:20
で、あとあれですね、少し調べたんですけれども、まあ、そういう私がやってたそのクラスへというか、まあ、

Guest 19:29
ドムを指定する方式で、こううまいことを外から指定してあげられないかなっていうのを調べていたんですけど、も

Guest 19:37
ま、例えば、サイプレスっていうライブラリがありまして、うん、サイプレスもすごい優秀なそのいいテストのライブラリなんですけども、そこも

Guest 19:47
結構そのベストプラクティスっていうページ

Guest 19:51
がありまして、そこで、ドムをこううまい具合に指定する方法みたいなのを紹介されていまして。え、あそこを見ると、やっぱりその名前をつけてあげてくださいっていう

Guest 20:05
うん、感じになってますね。うん。ただ、そのクラス名ではなくて、サイプレスの場合だと、

Guest 20:14
データcyっていうプロパティをこう与えやってあげるみたいなのが、まあ良いですよ。っていううんことが

Guest 20:23
指定されてますね。

Guest 20:25
うん、

Guest 20:26
テストで使うためのものに、クラスの名前をつけてるっていうのも、まあ、確かに

Guest 20:34
そ。そのためだけにクラスが増えるっていうのもなんか

Guest 20:38
うん、そうですね。まあ、なんかそういうそういうところ、そういう現場もなんか今まで見たことあるんですけど、そうですね。確かに

Guest 20:46
うん、

Guest 20:49
まあ、確かにデータアトリミュートで指定してあげるっていうのが、なんか良さそうな感じは確かにありますね。うん、

Guest 20:59
まあ、あとはそうですね、結構なんかなんかidを管理するのとか、結構難しかったりしそうですけどね。なんか、その

Guest 21:07
あ、頭でると、そのいろんなところに振ってくと、そのからないようにしないといけないんで、あ、その辺どうやってるのかなって思いますけど、

Guest 21:17
それはかなり困難な。

Guest 21:20
うん、なんか、どういうルールでそういうアトリビトをつけていくのか、ちょっと気になりますね。

Guest 21:27
うん、それはまたあれですかね。デムに回避するデムみたいな、メムルールみたいな自動でつけてほしいですね。そ、

Guest 21:38
確かになんかちょっと大変そう。

Guest 21:42
あ、他に藤井さんはなんかこう問題点みたいなのってありました。

Guest 21:48
はい、まいくつか問題があってですね。

Guest 21:53
まあ、そのビジャリレーションテストを実施するにあたって、まあ、そのテストが難しかったuyっていうのがまありまして

Guest 22:02
ま、それは何かって言うと、お年玉のあのダッシュボードなんですけど、も

Guest 22:05
はい

Guest 22:06
となんで難しかったかっていうと、まあ、あのダッシュボードにはあのアニメーションを使っていて、

Guest 22:12
で、ああ、ハイションがそのま実行時に、そのスナップショットを取るタイミングで、そのま、アニメーションで、こう動いてる画像があると思うんですけど、あの画像が表示されている位置ってのが毎回微妙に異なってしまって、

Guest 22:24
で、それで、まあそこが差分になって、常にテストがフェールしてしまうっていう問題がありました。

Guest 22:31
なので、まあ結構その実行時にま、毎回その実行結果が変わってしまうような。uiはちょっと。ビジュアル、リュエーションテストには向いてないかなっていうのは、あの思いました。

Guest 22:41
もしかしたら、そのそうですね、そういうなんか、あの変化が必ず毎回変化が起きてしまうような部分だけこう。なんか、テスト対象から除外できるみたいな

Guest 22:51
ことができると、まあいいのかなと思うんですけど。ああ、多分今のところそういうことは多分多分できないと思います。うん、

Guest 22:59
はい、そうですね、まあ、確かにあのアニメーション

Guest 23:04
ああ、そっか。でも、アニメーションってあれですよね。そのトランジション的なアニメーションではなくて、常にこう。はい、キャラクターがあ、そうです。そうです、そうです、はいはいはいはい、そう

Guest 23:12
なんすよ、ディションだとそうですね、多分数秒待てばあの止まってくれるんで、それでなんとかなると思うんですけど、もうずっと動き続

Guest 23:22
ものですね、それは無理なんじゃないですか、

Guest 23:25
そうなんですよ、だから、なんかそういうなんて言うんですか。そういう動いてる部分だけ、こう除外してくれるみたいな。あ、はいはい、なんかそういうのがあるといいなと思うんです。

Guest 23:35
はい、で、もう1つ難しかったところがあって、あのはいま当初あれですね。

Guest 23:42
その正解のスナップショットを取る環境とま、実際に実行結果のスナップショットを取る環境っていうのが一致しなかったのはいですね。はいで、そういう環境で、テストを行うと、まあ何が起きたかっていうと、

Guest 23:54
ままず1つはos間のそのシステムフォンとの違いによって、その文字のところで微妙に差分が出てしまうっていう問題が1つはいありました。

Guest 24:03
で、もう1個はまそのブラウザの改造度の違いによって、まあ、テストがフェールしてしまうっていうものがあったんで、まあ、そのテストを実施するときは、できるだけその

Guest 24:12
あの実行環境とま正解の画像を取る環境っていうのは、揃えて取らないといけないなっていうのは、ま1つ気づき

Guest 24:20
ありましたね。はい、結構それはその知り合いの環境がバラバラだったっていう感じですか。それとも、あ、

Guest 24:27
そうですね、元々は自分のローカルpc。あ、あのmac使ってはいるんですけど、マック上で正解画像を取って

Guest 24:37
で、その正解画像と後は実行結果というのはci上で。実行した結果だったんですね。はいで、そこでそのosがま違ってるんで、あのま、システムフォントの違いでま差分が出てしま

Guest 24:50
あります。そうですね、ま、極力合わせるしかない。

Guest 24:55
うん、そうですね、なんで。まあ、途中からはその全部その正解画像を取るのもま試合上で、

Guest 25:01
正解画像を取るっていう風なフローを作ってま、そうやって運用するようにしましたね。

Guest 25:07
できるだけ、まあ、ユーザーの環境に合わせたっていうソースが求められる結構

Guest 25:14
で、試合所で用意するっていうのも、それはそれで、なんか本末店舗というか、なかなかそのうん、結構

Guest 25:24
大変かもですね。うん

6. E2Eテストの今後 25:27

Guest 25:28
ま結構ま色々とこうビジュアルエッションテスト記録と一位テストの

Guest 25:34
ま問題っていうか、ま、色々と課題はあって、なかなかこう。普通のユニットテストと比べて、あんまり大規模に採用されてるってことは、あんまりなかったり

Guest 25:45
するところだとは思うんですけれどもま、今後なんかもっとこう便利に活用していくみたいなのをやっていきたいなっていうのは、個人的には思っているんですよね。

Guest 25:55
で、結構割となんだかんだ言って、そのテストをこう用意して、環境を用意して、

Guest 26:02
で、このページのスナップショットっていうのを指定してあげてっていう一連の作業がすごくめんどくさいっていうのが、多分

Guest 26:10
正直なところなんじゃないかなと思っていて、結構パフィティアの登場によって、だいぶそこら辺とかは解消された感はあるんですけども。なんかもっとこう高レーヤーなスナップショットみたいなのがして、

Guest 26:23
してあげたらいいなっていうのは、

Guest 26:27
はいはい、

Guest 26:27
なんか私はそうですね、あの、まあ逆に結構なんかそのテスト書くのが大変っていう話だったと思うんですけど、なんか

Guest 26:36
あのまた分田村さんのケースだと結構そのナビゲーションがすごい多くてま、テストコードが結構大きかったのかなは思う。はいすけど、なんか私ぐらいのケースだと、まあ、あの、そのランディングページのスナップショットを取ってまその正解画像と比較するみたいな

Guest 26:50
ぐらいだとま、実際そのとブラウザを立ち上げて、まあ言われる。打ち込んでで、ページが表示されたら、そのスナップショットを撮影して、

Guest 27:00
正解画像と比較するみたいな。はいま、これぐらいの処理だとま。実際、その私が書いた行動量って、まあ10行以下ぐらいですよ。

Guest 27:09
だから、そうですよだから、すごいあの、まあコスパよくテストが書けるなっていう印象が。まあ、私は逆にあって、あ、はいありましたけどね。はい、

Guest 27:18
ま、ただた分たまさんみたいに結構複雑ななんてうんすか。なんか、その

Guest 27:22
ページの奥の奥の奥みたいな感じで行こうとすると、確かに結構大変なのかなっていう気はしますね。そのセレクターの問題もあるし、はい

Guest 27:31
いや。今回の例だと、多分、藤井さんのそのランディングページメインのまあ、プロジェクトだとかなりこう。

Guest 27:40
ピッタリと当てはまる

Guest 27:43
そうですね。そうですね、と思います。はいはい、

Guest 27:47
あとはうん、結構まテスト時間の問題にも根本的な問題かな

Guest 27:54
っていう、うん、ま、確かにって言ってま。それをやっぱり解決するためには、そういう並列化ですかね。

Guest 28:03
まただそうですね、あの、

Guest 28:06
なんていうか、最初のちょっとメリットを説明する部分で、あのちょっと漏れ漏れてたんですけど、結構ビジュアル、リグレーションテストの利点

Guest 28:13
てなんていうんですかね。通常のユニットテストだと、まあ、なんかそのページからそのドーム

Guest 28:18
を取得して、ま、そのドムのストリング取ってきて、で、その正解のストリングと比較するみたいなま、そういう結構部分的なテストになってしまうと思うんですけど、

Guest 28:28
あの、ビジュアルリグレーションテストって、そのページ全体をテスト対象にしてるんで、ま、結構幅広いことがテストできる

Guest 28:36
かなと思ってますね。ま、なんか、その通常のユニットテストだと、その見た目に関するテストとか、結構

Guest 28:43
書くの難しいと思う。はいすけど、ま、そういったところまでカバーできるんで、ま。1つのテストケースで、まかなりの多くのことが

Guest 28:49
テストできるんで、ま。テストケースの数自体も結構あのま、ユニットテストの数と比べると結構減るのかなっていう気はしてます。

Guest 28:58
あ、そうですよね、確かに

Guest 29:00
はい、あの、

Guest 29:01
なんかめんどくさいめんどくさいって僕、すごい言ってしまってましたけど、ユニットテストとかと比べると、確かにそう考えると

Guest 29:10
あれですよね。そのテスト実行時間の長大化よりも、断然そっちのメリットの方が

Guest 29:17
確かにそうですね。そうですね、なんか、そこが結構なんか、そのビジャビゲーションテストのいいところの1つかなって

Guest 29:26
ま。ちょっと最初にあの言うの忘れてたんですけど、はい、そうですね、その辺がメリットだと感じてますね。

Guest 29:33
あと、あれですよね、結構

Guest 29:34
テストってなんていうんですかね。なかなかこううん、理解をいづらいというか、結構開発者がこう把握していないと、難しいところとかもテストがあったりすると思うんですけど、そのユニットテストとかだと、

Guest 29:50
うん、

Guest 29:53
正直そのなんて言うんすかね。エンジニア以外でも、このページのま見た目を確認するみたいな、ある意味での分かりやすさみたいなのに、

Guest 30:06
そういう。なんか、そのテストでまそのページが出来上がったら、その自動的にテストが出来上がるみたいなのも、なんかその

Guest 30:13
割と利点というか、自動化できそうなところかもしれない。

Guest 30:18
なんか、そのページを作ったら、勝手にリフレッションテストのいます。テストスイートをポンと出してくれるみたいな。はいはい、はい、

Guest 30:25
確かになんかできそうですね、

Guest 30:27
なんかなんか誰か

Guest 30:32
そうですね、確かに結構理想的な感じですね。あの、ページを1個作るごとに、どんどんテストが自動的に書かれていくってや、

Guest 30:40
それは欲しいな。

Guest 30:43
そうなんか、そのページのスナップショットとって比較するみたいな。それぐらいのものだったら、全然自動的に作れそうですよね。そうですよね、

Guest 30:51
それぐらいてければ、何か他富士山とかもあったりしますか。

Guest 30:58
期待することで、

Guest 30:59
そうそうですね、なんかこう、今後はい、こうなってほしいみたいな。

Guest 31:03
そうですね、まあ、なんかさっきほどもあったんですけど、あの、まあ、クロスブラウザでこうテストができるようになると、まあ結構そのテスト範囲が広がって、まあいいかなと思いましたね。

Guest 31:16
あ、あ、そうですね、うん、はい、あ、これはあれですね。パベティアドプレイライトの今後に来たみたいな。

Guest 31:25
そうですね、はい、期待したいです

Guest 31:29
割とそのブラウザーだけではないかもしれないですね。結構この問題は、そのそれこそはそのiosかandroidかみたいな問題も

Guest 31:39
ありますし、そのフォントの問題とか、それを全部ですね。ひっくるめてやれると。

Guest 31:45
そうですね、

Guest 31:46
確かに、ほんとの問題はどうしても起きちゃいますよね。クロスブラウザーであると、微妙にこうほんとに違いが出て、フェイルしてしまうっていう問題が、多分、今今の今のものだと、多分そういう感じになってしまうんで、

Guest 31:59
その辺もちゃんと考慮できるようになってるといいですね。

Guest 32:03
は全てのユザ環境、windowsmacisandroid全部で

Guest 32:07
みたいな。そうですね、理想理想です。

Guest 32:14
ま、あとはなんかさっきも言ったんですけど、ま、そのアニメーションのあるところとか、結構あの現示典のビジアビゲーションテストはいて、どうしてもテストが難しいぶ

Guest 32:23
ありましたは、

Guest 32:24
なんか、その部分的にこうテスト対象から除外するみたいな。ま、そういうことができると結構いいなっていうのはありますかね。

Guest 32:32
そうですね、そこを機械的にできないかなとは思いますね。

Guest 32:38
まあ、なんか手でやってもいいかもしんないすけど、なんかこうわかんないですけど、座標ではいはい、なんか00からなんか何々まで

Guest 32:47
この部分。このエリアはアクセルの資格を行わないみたいな。なんか、そんな感じでもいいかなと思ってるんですけど、なんか、そんな感じの機能があれば、

Guest 32:55
そんななかなかアニメーション、マシマシみたいな。結構特集だとは思いますし、うん、この一部分だけみたいな感じ。

Guest 33:04
そうですね。

Guest 33:05
で、除外してあげれば十分加工。うん、確かにあ、はい、わかりました、ありがとうございます

7. クロージング 33:14

Guest 33:15
はい、というわけでえ。今回はビジュアルレエッションテストをテーマに

Guest 33:21
eテストのま、様々な課題や、今後の期待についてお送りしました。

Guest 33:28
私達UITのメンバーが所属するLINE株式会社では、このようなフロントエンドに関する議論を行っております。

Guest 33:37
今回のような、

Guest 33:39
まあ割と実務よりのテーマである他にも、社内勉強会での内容についてなどま、今後もテインサイトでどんどん発信していきたいと思います。

Guest 33:51
また、ポットキャストを通じて、ラインに興味を持たれましたら、カジュアル面談など

Guest 33:58
もお待ちしております。ぜひ、ページ、株のえ、リンクよりご連絡ください。それでは、また次回のエピソードでお会いしましょう。

Guest 34:07
それではゲストの藤井さん、ありがとうございました、

Guest 34:09
ありがとうございました。