Submit Search
Upload
reg-suitとQA Wolfを活用したVisual Regression Test
•
4 likes
•
3,427 views
Kazuyuki Tsuzisaki
Follow
ソフトウェアテスト自動化カンファレンス2020
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 62
Recommended
Agileツール適合化分科会(テスト自動化ツール)
Agileツール適合化分科会(テスト自動化ツール)
masanori kataoka
受託開発でテストファーストしたらXXXを早期発見できてハイアジリティになったはなし
受託開発でテストファーストしたらXXXを早期発見できてハイアジリティになったはなし
terahide
「GebとSpockではじめるシステムテスト自動化」
「GebとSpockではじめるシステムテスト自動化」
Hiroyuki Ohnaka
私にとってのテスト
私にとってのテスト
Takuto Wada
CI/CDツール比較してみた
CI/CDツール比較してみた
Shoya Kai
FastAPIを使って 機械学習モデルをapi化してみた
FastAPIを使って 機械学習モデルをapi化してみた
Sho Tanaka
自動テストの誤解とアンチパターン in 楽天 Tech Talk
自動テストの誤解とアンチパターン in 楽天 Tech Talk
kyon mm
品質を加速させるために、テスターを増やす前から考えるべきQMファンネルの話(3D版)
品質を加速させるために、テスターを増やす前から考えるべきQMファンネルの話(3D版)
Yasuharu Nishi
Recommended
Agileツール適合化分科会(テスト自動化ツール)
Agileツール適合化分科会(テスト自動化ツール)
masanori kataoka
受託開発でテストファーストしたらXXXを早期発見できてハイアジリティになったはなし
受託開発でテストファーストしたらXXXを早期発見できてハイアジリティになったはなし
terahide
「GebとSpockではじめるシステムテスト自動化」
「GebとSpockではじめるシステムテスト自動化」
Hiroyuki Ohnaka
私にとってのテスト
私にとってのテスト
Takuto Wada
CI/CDツール比較してみた
CI/CDツール比較してみた
Shoya Kai
FastAPIを使って 機械学習モデルをapi化してみた
FastAPIを使って 機械学習モデルをapi化してみた
Sho Tanaka
自動テストの誤解とアンチパターン in 楽天 Tech Talk
自動テストの誤解とアンチパターン in 楽天 Tech Talk
kyon mm
品質を加速させるために、テスターを増やす前から考えるべきQMファンネルの話(3D版)
品質を加速させるために、テスターを増やす前から考えるべきQMファンネルの話(3D版)
Yasuharu Nishi
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
gree_tech
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
What is quality culture? Is it something tasty?
What is quality culture? Is it something tasty?
Yasuharu Nishi
小さなサービスも契約する時代
小さなサービスも契約する時代
Ryo Mitoma
Transformerを雰囲気で理解する
Transformerを雰囲気で理解する
AtsukiYamaguchi1
KPTの基本と、その活用法
KPTの基本と、その活用法
ESM SEC
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
Atsushi Nakada
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
AWSではじめるMLOps
AWSではじめるMLOps
MariOhbuchi
テストは料理だ!テストのレシピを見てみよう #wacate
テストは料理だ!テストのレシピを見てみよう #wacate
Kazuhiro Takehana
クラシフィケーション・ツリー法入門
クラシフィケーション・ツリー法入門
H Iseri
敵対的生成ネットワーク(GAN)
敵対的生成ネットワーク(GAN)
cvpaper. challenge
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
SEGADevTech
テストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jp
kyon mm
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Hiro H.
モダンフロントエンド開発者に求められるスキルとは
モダンフロントエンド開発者に求められるスキルとは
Takuya Tejima
テスト分析.pptx
テスト分析.pptx
kauji0522
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
テスト自動化のパターンと実践
テスト自動化のパターンと実践
Hiroshi Maekawa
インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方
Shohei Koyama
Awsで実現するseleniumテスト高速術
Awsで実現するseleniumテスト高速術
finoue
Win7 * appium * androidで実機自動テストやってみた。
Win7 * appium * androidで実機自動テストやってみた。
Naoto Kishino
More Related Content
What's hot
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
gree_tech
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
What is quality culture? Is it something tasty?
What is quality culture? Is it something tasty?
Yasuharu Nishi
小さなサービスも契約する時代
小さなサービスも契約する時代
Ryo Mitoma
Transformerを雰囲気で理解する
Transformerを雰囲気で理解する
AtsukiYamaguchi1
KPTの基本と、その活用法
KPTの基本と、その活用法
ESM SEC
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
Atsushi Nakada
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
AWSではじめるMLOps
AWSではじめるMLOps
MariOhbuchi
テストは料理だ!テストのレシピを見てみよう #wacate
テストは料理だ!テストのレシピを見てみよう #wacate
Kazuhiro Takehana
クラシフィケーション・ツリー法入門
クラシフィケーション・ツリー法入門
H Iseri
敵対的生成ネットワーク(GAN)
敵対的生成ネットワーク(GAN)
cvpaper. challenge
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
SEGADevTech
テストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jp
kyon mm
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Hiro H.
モダンフロントエンド開発者に求められるスキルとは
モダンフロントエンド開発者に求められるスキルとは
Takuya Tejima
テスト分析.pptx
テスト分析.pptx
kauji0522
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
テスト自動化のパターンと実践
テスト自動化のパターンと実践
Hiroshi Maekawa
インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方
Shohei Koyama
What's hot
(20)
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
What is quality culture? Is it something tasty?
What is quality culture? Is it something tasty?
小さなサービスも契約する時代
小さなサービスも契約する時代
Transformerを雰囲気で理解する
Transformerを雰囲気で理解する
KPTの基本と、その活用法
KPTの基本と、その活用法
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
AWSではじめるMLOps
AWSではじめるMLOps
テストは料理だ!テストのレシピを見てみよう #wacate
テストは料理だ!テストのレシピを見てみよう #wacate
クラシフィケーション・ツリー法入門
クラシフィケーション・ツリー法入門
敵対的生成ネットワーク(GAN)
敵対的生成ネットワーク(GAN)
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
テストとリファクタリングに関する深い方法論 #wewlc_jp
テストとリファクタリングに関する深い方法論 #wewlc_jp
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
モダンフロントエンド開発者に求められるスキルとは
モダンフロントエンド開発者に求められるスキルとは
テスト分析.pptx
テスト分析.pptx
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
テスト自動化のパターンと実践
テスト自動化のパターンと実践
インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方
Similar to reg-suitとQA Wolfを活用したVisual Regression Test
Awsで実現するseleniumテスト高速術
Awsで実現するseleniumテスト高速術
finoue
Win7 * appium * androidで実機自動テストやってみた。
Win7 * appium * androidで実機自動テストやってみた。
Naoto Kishino
TDD勉強会キックオフ for Java
TDD勉強会キックオフ for Java
Yuta Kawadai
Casper導入資料
Casper導入資料
Yuuki Tan-nai
第4回勉強会 単体テストのすすめ
第4回勉強会 単体テストのすすめ
hakoika-itwg
はこだてIKA 第4回勉強会 単体テスト
はこだてIKA 第4回勉強会 単体テスト
Seiji KOMATSU
究極のバッチフレームワーク(予定)
究極のバッチフレームワーク(予定)
fumoto kazuhiro
Xcode10での テスト周りの進化をふりかえる
Xcode10での テスト周りの進化をふりかえる
Toshiyuki Hirata
Unit testで定時帰宅!
Unit testで定時帰宅!
Funato Takashi
Tokyor14 - R言語でユニットテスト
Tokyor14 - R言語でユニットテスト
Yohei Sato
CruiseControl.NET設置
CruiseControl.NET設置
Kuniaki Igarashi
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
Tatsuya Ishikawa
nGrinder3 : だれもが簡単にできる性能テスト
nGrinder3 : だれもが簡単にできる性能テスト
JunHo Yoon
アジャイル×テスト開発を考える
アジャイル×テスト開発を考える
yasuohosotani
ワンクリックデプロイ101 #ocdeploy
ワンクリックデプロイ101 #ocdeploy
Ryutaro YOSHIBA
エンジニア目線で見る TLA+ と PlusCal - TAKAMI Torao
エンジニア目線で見る TLA+ と PlusCal - TAKAMI Torao
Torao Takami
毎日が憧れの新築、反復可能なデリバリーによる常時新築システム
毎日が憧れの新築、反復可能なデリバリーによる常時新築システム
Tomohiro Ohtake
CLRH_120414_WFTDD
CLRH_120414_WFTDD
Tomoyuki Obi
C# から java へのプログラム移植で体験したtddの効果は?
C# から java へのプログラム移植で体験したtddの効果は?
Shinichi Hirauchi
Test Plugins
Test Plugins
ykhr
Similar to reg-suitとQA Wolfを活用したVisual Regression Test
(20)
Awsで実現するseleniumテスト高速術
Awsで実現するseleniumテスト高速術
Win7 * appium * androidで実機自動テストやってみた。
Win7 * appium * androidで実機自動テストやってみた。
TDD勉強会キックオフ for Java
TDD勉強会キックオフ for Java
Casper導入資料
Casper導入資料
第4回勉強会 単体テストのすすめ
第4回勉強会 単体テストのすすめ
はこだてIKA 第4回勉強会 単体テスト
はこだてIKA 第4回勉強会 単体テスト
究極のバッチフレームワーク(予定)
究極のバッチフレームワーク(予定)
Xcode10での テスト周りの進化をふりかえる
Xcode10での テスト周りの進化をふりかえる
Unit testで定時帰宅!
Unit testで定時帰宅!
Tokyor14 - R言語でユニットテスト
Tokyor14 - R言語でユニットテスト
CruiseControl.NET設置
CruiseControl.NET設置
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
nGrinder3 : だれもが簡単にできる性能テスト
nGrinder3 : だれもが簡単にできる性能テスト
アジャイル×テスト開発を考える
アジャイル×テスト開発を考える
ワンクリックデプロイ101 #ocdeploy
ワンクリックデプロイ101 #ocdeploy
エンジニア目線で見る TLA+ と PlusCal - TAKAMI Torao
エンジニア目線で見る TLA+ と PlusCal - TAKAMI Torao
毎日が憧れの新築、反復可能なデリバリーによる常時新築システム
毎日が憧れの新築、反復可能なデリバリーによる常時新築システム
CLRH_120414_WFTDD
CLRH_120414_WFTDD
C# から java へのプログラム移植で体験したtddの効果は?
C# から java へのプログラム移植で体験したtddの効果は?
Test Plugins
Test Plugins
reg-suitとQA Wolfを活用したVisual Regression Test
1.
reg-suitとQA Wolfを活用した Visual Regression
Test エムスリー 阿部 一幸
2.
おはなし ❏ 自動E2Eテストの現実 -つらみ- ❏
自動E2Eテストの現実に立ち向かう -目視確認- ❏ 目視確認のための自動化 ❏ Visual Regression Testの世界へ ❏ reg-suitで手軽にVisual Regression Test ❏ QA Wolfでスクリーンショットを取得 ❏ Unit Test同様にCIで実行 ❏ 現場の声 ❏ まとめ
3.
自動E2Eテストの現実 -つらみ-
4.
自動E2Eテストの現実 -つらみ- ❏ 自動E2Eテストの現実 ❏
テストNGの時、自動テストの不備をまず疑う ❏ テストNGなのに、対象システムにバグがあると言いきれない ❏ 自動テストもプログラムに過ぎず、テスト自身のバグの可能性 ❏ 自動テスト用環境が原因の可能性 ❏ 自動テスト用技術が原因の可能性 ❏ リトライしたら動いてしまうような、一時的な問題の可能性 ❏ 保守が追いついておらず、常にNGとなる状態のままの可能性
5.
自動E2Eテストの現実 -つらみ- ❏ 自動E2Eテストの現実 ❏
暗黙で目視確認してるような観点は、自動テストで意外と漏れてる ❏ ログイン機能のテスト ❏ ID、パスワードを入力してログインできることを確認 ❏ ログインできるとは? ❏ URLがログイン後ページのものになっているだけでいい? ❏ レイアウトが崩れていてもいい? ❏ 当然ダメだけど、プログラムで確認しろというのは辛い ❏ 自動テストは書いたことしかテストしない(自動化8原則の3)
6.
自動E2Eテストの現実 -つらみ- ❏ 自動E2Eテストの現実 ❏
自動テストが動かなくなったら、そのままになる ❏ 何よりリリース優先 ❏ 開発者としてはテストしてもらえればよく、手段は手動自動を問わない ❏ 自動テストが動かない時は、動くように修正ではなく手動テストをする ❏ リリースを終えても次のリリース対応になり、修正しないままになる
7.
自動E2Eテストの現実 -つらみ- ❏ 自動E2Eテストの現実 ❏
とはいえ、自動テストをまったくしないという選択肢はない ❏ 同じテストが繰り返し求められる ❏ 短期間で広範囲のテストを求められる ❏ 飽きやすい単調な定型テストをミスなく実施が求められる ❏ 影響がないと言いきれないところはテストが求められる ❏ 勤務時間内にこなせるテスト量が限られてしまう ❏ 上記状況に対して有用なのは間違いなく、現実的な手法ではある
8.
自動E2Eテストの現実に立ち向かう -目視確認-
9.
自動E2Eテストの現実に立ち向かう -目視確認- ❏ 自動E2Eテストの現実に立ち向かう ❏
テストNGの時、自動テストの不備をまず疑う現実 ❏ 暗黙で目視確認してるような観点は、自動テストで意外と漏れてる現実 ❏ 自動テストが動かなくなったら、そのままになる現実
10.
自動E2Eテストの現実に立ち向かう -目視確認- ❏ 自動E2Eテストの現実に立ち向かう ❏
テストNGの時、自動テストの不備をまず疑う現実 ❏ 暗黙で目視確認してるような観点は、自動テストで意外と漏れてる現実 ❏ 愚直に目視確認を追加した ❏ 修正影響を目視確認できる状態にするところまでを、自動化した ❏ 自動テストが動かなくなったら、そのままになる現実 ❏ もちろん、目視確認の追加が他2つの現実に直面しないようにした
11.
自動E2Eテストの現実に立ち向かう -目視確認- ❏ 自動E2Eテストの現実に立ち向かう ❏
テストNGの時、自動テストの不備をまず疑う現実 ❏ テストNGの時点で目視確認はできている ❏ 目視確認できる状態なら、自動化側の不備から疑うことはないはず ❏ 暗黙で目視確認してるような観点は、自動テストで意外と漏れてる現実 ❏ 修正影響を目視確認できる状態にするところまでを、自動化する ❏ 自動テストが動かなくなったら、そのままになる現実
12.
自動E2Eテストの現実に立ち向かう -目視確認- ❏ 自動E2Eテストの現実に立ち向かう ❏
テストNGの時、自動テストの不備をまず疑う現実 ❏ 目視確認できる状態なら、自動化側の不備から疑うことはないはず ❏ 暗黙で目視確認してるような観点は、自動テストで意外と漏れてる現実 ❏ 修正影響を目視確認できる状態にするところまでを、自動化する ❏ 自動テストが動かなくなったら、そのままになる現実 ❏ 修正が行われればいい(それはそう) ❏ 修正影響を目視確認できる状態の維持を、開発者の責務とした ❏ すんなりと受け入れられた
13.
自動E2Eテストの現実に立ち向かう -目視確認- ❏ 自動E2Eテストの現実に立ち向かう ❏
テストNGの時、自動テストの不備をまず疑う現実 ❏ 暗黙で目視確認してるような観点は、自動テストで意外と漏れてる現実 ❏ 自動テストが動かなくなったら、そのままになる現実 ❏ 目視確認テストを追加した ❏ 修正影響を目視確認できる状態にするところまでを、自動化した ❏ 修正影響を目視確認できる状態の維持を、開発者の責務とした ❏ 状態の維持実現のため、Unit Test同様にCIで実行されるようにした
14.
目視確認のための自動化 Visual Regression Testの世界へ
15.
Visual Regression Testの世界へ ❏
Visual Regression Testとは ❏ 視覚的な手法で行うRegression Test ❏ 修正前後を画像比較して差分がなければ、テストOKとなる ❏ 画像取得、画像比較、比較結果レポートができるツールを使う
16.
Visual Regression Testの世界へ ❏
Visual Regression Testとは ❏ 視覚的な手法で行うRegression Test ❏ 修正前後を画像比較して差分がなければ、テストOKとなる ❏ 画像取得、画像比較、比較結果レポートができるツールを使って行う ❏ 修正影響を目視確認できる状態にするところまでの自動化に使った ❏ ツールのテストOK/NG判定は、差分なし/差分ありと読み替えた ❏ 修正により想定される差分なら、目視確認時にテストOKとした
17.
Visual Regression Testの世界へ ❏
Visual Regression Test用のツール ❏ Awesome Visual Regression Testing ❏ https://github.com/mojoaxel/awesome-regression-testing ❏ 3種類 ❏ 画像取得、画像比較、比較結果レポート All-in-One ❏ BackstopJS (Star:5.6k) ❏ 画像比較、比較結果レポート のみ ❏ reg-suit (Star:0.7k) ❏ 画像比較 のみ ❏ Resemble.js (Star:3.7k)
18.
Visual Regression Testの世界へ ❏
Visual Regression Test用のツール ❏ BackstopJS(All-in-One) ❏ 利用できるブラウザが限定される ❏ 自分で用意した画像で画像比較ができない ❏ 画像取得の方法が独特で辛い ❏ URLを設定ファイルに記載するだけで完結するのがウリ ❏ スクリーンショットを取得するURLを記載 ❏ Post処理が必要なURLの場合は、DSLで処理を記載 ❏ ログインが必要なURLの場合は、DSLで処理を記載 ❏ URLを設定ファイルに記載するだけで完結とは?
19.
Visual Regression Testの世界へ ❏
Visual Regression Test用のツール ❏ Resemble.js(画像比較のみ) ❏ 目視確認できない
20.
Visual Regression Testの世界へ ❏
Visual Regression Test用のツール ❏ reg-suit(画像比較、比較結果レポートのみ) ❏ 自分で用意した画像で画像比較ができた ❏ 見やすい比較結果レポートで目視確認ができた ❏ 画像取得はブラウザ操作ツールで自動化できる
21.
目視確認のための自動化 reg-suitで手軽にVisual Regression Test
22.
reg-suitで手軽にVisual Regression Test ❏
reg-suitのコア機能 ❏ 2つの画像(期待値と現在)を比較 ❏ ピクセル単位の差分を検知 ❏ 新規画像(現在のみ存在)、削除画像(期待値のみ存在)を認識 ❏ 比較結果をHTML形式でレポート ❏ 差分あり一覧、差分なし一覧、新規一覧、削除一覧 ❏ 差分の詳細 ❏ プラグインで機能拡張できる
23.
reg-suitで手軽にVisual Regression Test ❏
処理の流れ(コア機能) 画像(現在) 画像(期待値) 比較 比較結果
24.
reg-suitで手軽にVisual Regression Test ❏
インストール ❏ package.jsonファイル ❏ "reg-suit": "x.xx.xx" ❏ npm install
25.
reg-suitで手軽にVisual Regression Test ❏
初期設定 ❏ npx reg-suit init ❏ 追加するプラグインの選択 ❏ ワーキングディレクトリの指定 ❏ 期待値画像を置くディレクトリなどが含まれる ❏ 現在画像を置くディレクトリの指定 ❏ 比較の敏感さの指定 ❏ 差分ありと判定する敏感さ ❏ ex.) 1ピクセルの差でも差分ありなのか
26.
reg-suitで手軽にVisual Regression Test ❏
実行 ❏ 画像を所定のディレクトリに置く ❏ npx reg-suit compare
27.
reg-suitで手軽にVisual Regression Test ❏
比較結果(サマリー)
28.
reg-suitで手軽にVisual Regression Test ❏
比較結果(詳細:2upモード)
29.
reg-suitで手軽にVisual Regression Test ❏
比較結果(詳細:Diffモード)
30.
reg-suitで手軽にVisual Regression Test ❏
比較結果(詳細:Slideモード)
31.
reg-suitで手軽にVisual Regression Test ❏
比較結果(詳細:Blendモード)
32.
reg-suitで手軽にVisual Regression Test ❏
比較結果(詳細:Toggleモード)
33.
reg-suitで手軽にVisual Regression Test ❏
処理の流れ(コア機能) 画像(現在) 画像(期待値) 比較 比較結果 自分で置く 自分で置く 自分でブラウザに表示する npx reg-suit compare
34.
reg-suitで手軽にVisual Regression Test ❏
処理の流れ(+プラグイン機能) 画像(現在) 画像(期待値) 比較 比較結果 ストレージ取得 保存 通知 自分で置く
35.
reg-suitで手軽にVisual Regression Test ❏
プラグインのインストール ❏ npx reg-suit init ❏ 追加するプラグインの選択 ❏ ワーキングディレクトリの指定 ❏ 期待値画像を置くディレクトリなどが含まれる ❏ 現在画像を置くディレクトリの指定 ❏ 比較の敏感さの指定 ❏ 差分ありと判定する敏感さ ❏ ex.) 1ピクセルの差でも差分ありなのか
36.
reg-suitで手軽にVisual Regression Test ❏
プラグイン込みの実行 ❏ npx reg-suit run(3コマンドを連続実行するコマンド) ❏ npx reg-suit sync-expected ❏ 期待値画像をストレージから取得 ❏ npx reg-suit compare ❏ 比較 ❏ npx reg-suit publish -n ❏ 比較結果、比較に使用した現在画像をストレージに保存 ❏ 比較結果を通知
37.
❏ 処理の流れ(+プラグイン機能) reg-suitで手軽にVisual Regression
Test 画像(現在) 画像(過去) 比較 比較結果 ストレージ取得 保存 通知 自分で置く npx reg-suit run
38.
目視確認のための自動化 QA Wolfでスクリーンショットを取得
39.
QA Wolfでスクリーンショットを取得 ❏ QA
Wolfとは ❏ ブラウザ操作コードの自動生成ツール ❏ ブラウザ操作を記録して、Playwright、Jestのコードを自動生成する ❏ エンジニアでなくてもブラウザ操作を自動化できる ❏ 保守性の高いコードは生成されない ❏ が、ブラウザ操作の一時的な自動化としては十分使える ❏ ex.) 今日1日同じ操作繰り返すから自動化しよう ❏ Chromium、Firefox、Webkitでの実行を1コマンドで行える
40.
QA Wolfでスクリーンショットを取得 ❏ Playwrightとは ❏
ブラウザ操作ツール ❏ ヘッドレス含むChromium、Firefox、Webkitに対応している ❏ WebDriverを利用していない ❏ スクリーンショットを取得できる ❏ クリックなどの操作ができるようになるまで自動で待つ ❏ ページ描画のための画像リクエストやjsリクエストを制御できる ❏ リクエスト停止、モック化、レスポンス受信まで待つ、etc.
41.
QA Wolfでスクリーンショットを取得 ❏ Playwrightとは ❏
プロキシを利用できる ❏ Shadow DOM、アップロード/ダウンロードなどにも対応できる ❏ デバイスをエミュレートできる ❏ UserAgent、Viewport、スケール、カラースキーム ❏ 座標、ロケール、オフラインモード ❏ モバイル端末モード、パーミッション(notificationsなど) ❏ etc.
42.
QA Wolfでスクリーンショットを取得 ❏ Jestとは ❏
JavaScript用のテストフレームワーク ❏ 挙動が想定通りかテストできる
43.
QA Wolfでスクリーンショットを取得 ❏ インストール ❏
npm init qawolf ❏ QA Wolf、Playwright、Jestのインストール ❏ 設定ファイルの作成 ❏ ワーキングディレクトリの指定
44.
QA Wolfでスクリーンショットを取得 ❏ コード自動生成 ❏
https://time.is/Tokyo にアクセスするコードを生成 ❏ npx qawolf create https://time.is/Tokyo xxxx ❏ xxxx.test.jsというファイルが生成される ❏ 指定のURLでブラウザが立ち上がる ❏ ブラウザ操作するとコードが追加される
45.
QA Wolfでスクリーンショットを取得 ❏ コード自動生成 ❏
https://time.is/Tokyo にアクセスするコードを生成 ❏ npx qawolf create --device="iPhone 8" https://time.is/Tokyo xxxx
46.
QA Wolfでスクリーンショットを取得 ❏ 生成されたコード(抜粋) test("timeis",
async () => { const page = await context.newPage(); await page.goto("https://time.is/Tokyo", { waitUntil: "domcontentloaded" }); 行った操作 });
47.
QA Wolfでスクリーンショットを取得 ❏ スクリーンショット取得処理を自分で追加 test("timeis",
async () => { const page = await context.newPage(); await page.goto("https://time.is/Tokyo", { waitUntil: "domcontentloaded" }); 行った操作 await page.screenshot({ path: 'directory_contains_actual_images/timeis.png', fullPage: true }); });
48.
QA Wolfでスクリーンショットを取得 ❏ 実行 ❏
npx qawolf test xxxx
49.
QA Wolfでスクリーンショットを取得 ❏ 処理の流れ(+
QA Wolf) 画像(現在) 画像(過去) 比較 比較結果 ストレージ取得 保存 通知 QA Wolfでスクリーンショット保存 npx qawolf test xxxx npx reg-suit run
50.
目視確認のための自動化 Unit Test同様にCIで実行
51.
Unit Test同様にCIで実行 ❏ 自動E2Eテストの現実に立ち向かう ❏
テストNGの時、自動テストの不備をまず疑う現実 ❏ 暗黙で目視確認してるような観点は、自動テストで意外と漏れてる現実 ❏ 自動テストが動かなくなったら、そのままになる現実 ❏ 目視確認テストを追加した ❏ 修正影響を目視確認できる状態にするところまでを、自動化した ❏ 修正影響を目視確認できる状態の維持を、開発者の責務とした ❏ 状態の維持実現のため、Unit Test同様にCIで実行されるようにした おさらい
52.
Unit Test同様にCIで実行 ❏ 開発の流れ ❏
開発者がコードをcommitする ❏ CIにより様々な処理が行われる ❏ 利用ライブラリの脆弱性チェック ❏ 静的コード解析 ❏ Unit Test実行 ❏ etc. ❏ 問題がなければコードレビューを依頼 ❏ 問題がなければテストを依頼
53.
Unit Test同様にCIで実行 ❏ 開発の流れ ❏
開発者がコードをcommitする ❏ CIにより様々な処理が行われる ❏ 利用ライブラリの脆弱性チェック ❏ 静的コード解析 ❏ Unit Test実行 ❏ Visual Regression Test実行 ❏ etc. ❏ 問題がなければコードレビューを依頼 ❏ 問題がなければテストを依頼
54.
Unit Test同様にCIで実行 ❏ CIへの組込 ❏
Dockerイメージの準備 ❏ CI組込用のQA Wolf公式Dockerイメージを使う ❏ https://hub.docker.com/r/qawolf/playwright-ci ❏ 日本語フォントが含まれず、日本語サイトの表示が文字化けする ❏ 特定フォントが必要ならそれを、ないならNotoなどをインストール ❏ Notoフォントファミリー ❏ Googleが提供しているフォントファミリー ❏ 世界中の言語サポートを目標としている
55.
Unit Test同様にCIで実行 ❏ CIへの組込 ❏
Dockerイメージの準備
56.
Unit Test同様にCIで実行 ❏ CIへの組込 ❏
コードがcommitされた時などに実行されるようにする ❏ 日本語フォントが含まれるDockerコンテナを起動 ❏ reg-suit、QA Wolfをインストール ❏ QA Wolfを実行 ❏ reg-suitを実行
57.
Unit Test同様にCIで実行 ❏ 処理の流れ(+
QA Wolf) 画像(現在) 画像(過去) 比較 比較結果 ストレージ取得 保存 通知 QA Wolfでスクリーンショット保存 npx qawolf test xxxx npx reg-suit run CIにて実行
58.
現場の声
59.
現場の声 ❏ 目視確認を追加したことで。。 ❏ 開発者 ❏
想定する影響/想定外の影響があるか目視確認できるようになった ❏ 最低限、画面が表示されることを保証できるようになった ❏ 負債コードの改修に対する精神的負荷を、減らせるようになった ❏ 目視確認用コードの保守は、画面表示だけなので苦労しなかった ❏ コードレビュアー ❏ 画面変化を目視確認でき、良し悪しを判断しやすくなった ❏ 画面変化を目視確認でき、コードが頭に入りやすくなった
60.
現場の声 ❏ 目視確認を追加したことで。。 ❏ QA ❏
画面変化を目視確認でき、テスト対象をイメージしやすくなった ❏ テスト開始時点で、画面を表示できることが保証された ❏ 開発者がテストの保守をすることで、開発者を当事者に巻き込めた ❏ CIのテスト環境ネットワークの整備が大変だった ❏ 今まではUnit Testできればよかった ❏ 他システムとの通信が発生するようになった
61.
まとめ
62.
まとめ ❏ 暗黙で目視確認してるような観点は、愚直に目視確認がいい ❏ 目視確認するための土台作りは自動化できる ❏
スクリーンショット取得はQA Wolfおすすめ ❏ 画像比較、比較結果レポートはreg-suitおすすめ ❏ 開発フェーズの画像比較は、3者にメリットがあって良いもの ❏ 開発者 ❏ コードレビュアー ❏ QA