2015年に「画面テストの動画録画」を作って「流行れ！」 と願ったが、流行らんかった上ロストした話 #seleniumjp
•
0 likes•286 views
「第1回 日本Seleniumユーザーコミュニティ勉強会 in Kansai」 (2019/11/28) にて発表させていただいたセッションのスライドです。(時間:30分) #seleniumjp 申し込みサイト : https://seleniumjp.connpass.com/event/155186
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 2015年に「画面テストの動画録画」を作って「流行れ！」 と願ったが、流行らんかった上ロストした話 #seleniumjp
Similar to 2015年に「画面テストの動画録画」を作って「流行れ！」 と願ったが、流行らんかった上ロストした話 #seleniumjp (20)
More from Kazuhito Miura
More from Kazuhito Miura (20)
Recently uploaded
Recently uploaded (9)
2015年に「画面テストの動画録画」を作って「流行れ！」 と願ったが、流行らんかった上ロストした話 #seleniumjp
- 3. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry アプリのデモ • 関係ない別の勉強会で作ったWebアプリ • 勤怠データを表示＆ODFをDL出来る • SpirngBootで作った「極単純なJavaプログラム」 – SPAとかじゃないのでHTMLレンダリングするやつ https://github.com/kazuhito-m/java-odf-edit-sample
- 4. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry 自動テスト(Unit/IT)のデモ • 単体テストは「普通の単テ/DB使ったServiceテスト」 • 受け入れテスト(Integration Test)は 「画面表示してコンボ選択して表示」と程度E2Eテスト – Selenide使って実装 • 上記より、全量テストするには 「実DB」「Seleniumが動く環境(自前WebDriver/スタ ンドアロン/Grid) が要る
- 5. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry すまないと、思っている… • 単体テストは「普通の単テ/DB使ったServiceテスト」 • 受け入れテスト(Integration Test)は 「画面表示してコンボ選択して表示」と程度E2Eテスト – Selenide使って実装 • 上記より、全量テストするには 「実DB」「Seleniumが動く環境(自前WebDriver/スタ ンドアロン/Grid) が要る 大変申し訳無いですが… Selenium成分 (Selenium,Selenide,Geb等) は、 もうここ以降 出て来ません
- 6. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry CIのデモ • Jenkinsで構築 • PiplineScript(DeclarativePipeline)で AsCode – https://github.com/kazuhito-m/java-odf-edit-sample/blob/master/Jenkinsfile • Multi Branch Job (すべてのgit branchでpushされたらCI回る) で定義 • Source取得→DB用意(コンテナビルド&立上 げ)->単体テスト->画面テスト->成果物保存
- 9. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry 第1回 日本SeleniumUC勉強会 in Kansai Ver 1.0 20152015年に年に 「画面テストの動画録画」「画面テストの動画録画」 を作って「流行れ！」を作って「流行れ！」 と願ったが、と願ったが、 流行らんかった上、流行らんかった上、 ロストした話ロストした話
- 10. 突然ですが…
- 11. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry 突然ですが • ここで、あるプルリクエストをマージしておき ます。 – https://github.com/kazuhito-m/java-odf-edit -sample/pull/1 • マージされた「Jenkinsでmasterブランチの ビルドが走る…はず • 説明は後ほど…
- 16. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry ということで… • CIサーバ導入 • 画面テスト導入 • 画面テストのCI • ブランチ毎サーバ (コンテナ)CD • 各環境への ワンクリックデプロイ • CI異常で パトランプ回る • CIサーバから音がな る • CDサーバがしゃべる (カウントダウンとか する) • 画面テストの動画録画 出来る限りの「これがええやろｗ」 「やりたいんやｗ」をやる
- 17. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry やっと本題 • CIサーバ導入 • 画面テスト導入 • 画面テストのCI • ブランチ毎サーバ (コンテナ)CD • 各環境への ワンクリックデプロイ • CI異常で パトランプ回る • CIサーバから音がな る • CDサーバがしゃべる (カウントダウンとか する) • 画面テストの動画録画 出来る限りの「これがええやろｗ」 「やりたいんやｗ」をやる 今日は『コレ』のお話
- 19. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry こんなDockerイメージを作ってみた • イメージ(Docker Hub) – https://hub.docker.com/r/kazuhito/selenium-with-record-movie-standalone-chrome-debug • ソース(GitHub) – https://github.com/kazuhito-m/selenium-with-record-movie-standalone-chrome-debug
- 20. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry それは「なんなのか」？ • 公式のSeleniumのDockerHubには ”selenium/standalone-chrome-debug” というイメージがある – Standalone • 単体でサーバになる(Grid等を前提にしない) – Chrome • そのブラウザ専門(WebDriverがそれ用) – Debug • VNC搭載してて外から画面が見れる – 公式イメージは「上の組み合わせ」で選ぶよう大量 に上がってる –ベースイメージはUbuntu
- 21. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry それは「なんなのか」？-つづき • 「VNC積んでる」ってことは「コンテナ内にデスクトップがある」 ということ($DISPLAY変数/ディスプレイ番号”:1”番) • ”RecordMyDesktop”という「コマンドでデスクトップ録画できる ヤツ」をinstallさせて、「動画録画」の起動・終了のスクリプト 作った FROM selenium/standalone-chrome-debug:3.141.59 … RUN apt-get update -y && apt-get install -y recordmydesktop psmisc language-pack-ja && apt-get clean && rm -rf /var/lib/apt/lists/* … # create scripts RUN echo "#!/bin/bashnrecordmydesktop --display=$DIPLAY --no-sound --on- the-fly-encoding --delay=${RECORDING_WAIT_SECOND}s -o /output/test-evidence.ogv &" > /usr/local/bin/start-recording … FROM selenium/standalone-chrome-debug:3.141.59 … RUN apt-get update -y && apt-get install -y recordmydesktop psmisc language-pack-ja && apt-get clean && rm -rf /var/lib/apt/lists/* … # create scripts RUN echo "#!/bin/bashnrecordmydesktop --display=$DIPLAY --no-sound --on- the-fly-encoding --delay=${RECORDING_WAIT_SECOND}s -o /output/test-evidence.ogv &" > /usr/local/bin/start-recording … Dockerfile
- 22. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry それの使い方は？ • selenium/standalone-* 系イメージ同様、RUNして起動 – その際、コンテナ内の “/output” を Hostの「動画を落としたいディレクトリ」にマウントしとく • 「画面テストのコマンド」を「録画の起動/停止コマンド」で挟 んで実行 • サンプル:README.mdと先のプルリク
- 23. あ、 大事なこと 忘れてました
- 25. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry 三浦 一仁(みうら かずひと) 事故紹介？ • 通称:みうみう(他称) • Twitter:@kazuhito_m • Github:kazuhito-m • フリーランスのプログラマ – 最近は以下みたいなのを一本ずつ • k8s/gke/gcpでインフラ • アプリ(API)のリプレース • 好きなもの:自動化,「継続的なんとか」 – CI/CDとか大好物 髪を伸ばす
- 27. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry それはね… • 単体テストと比較して「スタックトレース・ロ グ等が”自体の把握”の決定打にならない」 • スクショを仕込むも「紙芝居」的なものでは 「動きの推測」に限界がある • スクショを仕込んでも「コケてる前後」の情報 が取りづらい – 仕込にて「コケたときのスクショ」は取れるけど… 画面テストは、 テスト中の「画面的な流れ・経緯」が 解らないと「NGのトラシュー」がしにくい
- 28. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry それはね… • 単体テストと比較して「スタックトレース・ロ グ等が”自体の把握”の決定打にならない」 • スクショを仕込むも「紙芝居」的なものでは 「動きの推測」に限界がある • スクショを仕込んでも「コケてる前後」の情報 が取りづらい – 仕込にて「コケたときのスクショ」は取れるけど… 画面テストは、 テスト中の「画面的な流れ・経緯」が 解らないと「NGのトラシュー」がしにくい 動画は、最悪 「コレ見りゃわかる」 という 「問答無用の エヴィデンス」 になりうる
- 29. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry 課題は在ります • 容量は「無限」が前提 – CI試行回数・テストケースの数に容量が比例 • 今回使っている”ogv”形式は「1分:1MB程度」と十分軽いが – 「以前の履歴捨てる」か「回数や容量にほぼ制限がない (S3等)」なところに貯めるか… – 動画サイトにオンザフライで飛ばす • コレはできそう、ただしOSSとか「公開でいい」なら • 動画のどこが「どのテストケースか」が解らない – 動画をケースごとに分割する？どうやって？ – チャプター的なものを動画に入れる？どうやって？ – テスト側に「このテストが始まります」的な画面を、故 意に出す • これはできそう、HTMLタイトルか画面の一部か
- 36. だったら…