Download to read offline
Uploaded byKazuhito Miura
2015年に「画面テストの動画録画」を作って「流行れ！」 と願ったが、流行らんかった上ロストした話 #seleniumjp
「第1回 日本Seleniumユーザーコミュニティ勉強会 in Kansai」 (2019/11/28) にて発表させていただいたセッションのスライドです。(時間:30分) #seleniumjp 申し込みサイト : https://seleniumjp.connpass.com/event/155186
More Related Content
![テスト自動化ツール[Selenium]を検討してみて](https://cdn.slidesharecdn.com/ss_thumbnails/20160723selenium-160724074540-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to 2015年に「画面テストの動画録画」を作って「流行れ！」 と願ったが、流行らんかった上ロストした話 #seleniumjp
2015年に「画面テストの動画録画」を作って「流行れ！」 と願ったが、流行らんかった上ロストした話 #seleniumjp
- 1.
- 2.
- 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用意(コンテナビルド&立上 げ)->単体テスト->画面テスト->成果物保存
- 7.
- 8.
- 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ブランチの ビルドが走る…はず • 説明は後ほど…
- 12.
- 13.
- 14.
- 15.
- 16. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry ということで… •CIサーバ導入 • 画面テスト導入 • 画面テストのCI • ブランチ毎サーバ (コンテナ)CD • 各環境への ワンクリックデプロイ • CI異常で パトランプ回る • CIサーバから音がな る • CDサーバがしゃべる (カウントダウンとか する) • 画面テストの動画録画 出来る限りの「これがええやろｗ」 「やりたいんやｗ」をやる
- 17. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry やっと本題 •CIサーバ導入 • 画面テスト導入 • 画面テストのCI • ブランチ毎サーバ (コンテナ)CD • 各環境への ワンクリックデプロイ • CI異常で パトランプ回る • CIサーバから音がな る • CDサーバがしゃべる (カウントダウンとか する) • 画面テストの動画録画 出来る限りの「これがええやろｗ」 「やりたいんやｗ」をやる 今日は『コレ』のお話
- 18.
- 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.
- 24.
- 25. SeleniumUC勉強会Kansai 第1回 Session3「画面テストの動画録画」を作って「流行れ！」と願った(ry 三浦一仁(みうら かずひと) 事故紹介？ • 通称:みうみう(他称) • Twitter:@kazuhito_m • Github:kazuhito-m • フリーランスのプログラマ – 最近は以下みたいなのを一本ずつ • k8s/gke/gcpでインフラ • アプリ(API)のリプレース • 好きなもの:自動化,「継続的なんとか」 – CI/CDとか大好物 髪を伸ばす
- 26.
- 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タイトルか画面の一部か
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.