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
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさ
Yoshiki Hayama
受託開発でテストファーストしたらXXXを早期発見できてハイアジリティになったはなし
受託開発でテストファーストしたらXXXを早期発見できてハイアジリティになったはなし
terahide
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
Yoshiki Hayama
Agile Quality アジャイル品質パターン (QA2AQ)
Agile Quality アジャイル品質パターン (QA2AQ)
Hironori Washizaki
品質を加速させるために、テスターを増やす前から考えるべきQMファンネルの話(3D版)
品質を加速させるために、テスターを増やす前から考えるべきQMファンネルの話(3D版)
Yasuharu Nishi
私にとってのテスト
私にとってのテスト
Takuto Wada
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022
Yusuke Suzuki
ソフトウェアの品質保証の基礎とこれから
ソフトウェアの品質保証の基礎とこれから
Yasuharu Nishi
Recommended
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさ
Yoshiki Hayama
受託開発でテストファーストしたらXXXを早期発見できてハイアジリティになったはなし
受託開発でテストファーストしたらXXXを早期発見できてハイアジリティになったはなし
terahide
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
Yoshiki Hayama
Agile Quality アジャイル品質パターン (QA2AQ)
Agile Quality アジャイル品質パターン (QA2AQ)
Hironori Washizaki
品質を加速させるために、テスターを増やす前から考えるべきQMファンネルの話(3D版)
品質を加速させるために、テスターを増やす前から考えるべきQMファンネルの話(3D版)
Yasuharu Nishi
私にとってのテスト
私にとってのテスト
Takuto Wada
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022
Yusuke Suzuki
ソフトウェアの品質保証の基礎とこれから
ソフトウェアの品質保証の基礎とこれから
Yasuharu Nishi
Head First Inception Deck
Head First Inception Deck
Naoto Nishimura
Hatena::Letの式年遷宮
Hatena::Letの式年遷宮
Takafumi ONAKA
テストアプローチにデータ分析を使おう
テストアプローチにデータ分析を使おう
Sayaka Nakano
目grep入門 +解説
目grep入門 +解説
murachue
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
Yoshiki Hayama
アジャイルテスト -高品質を追求するアジャイルチームにおけるテストの視点-
アジャイルテスト -高品質を追求するアジャイルチームにおけるテストの視点-
Satoshi Masuda
解説!30分で分かるLEAN ANALYTICS
解説!30分で分かるLEAN ANALYTICS
しくみ製作所
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
Yoshiki Hayama
品質とは何か.pdf
品質とは何か.pdf
kauji0522
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
Yoshiki Hayama
大企業アジャイルの勘所 #devlovex #devlovexd
大企業アジャイルの勘所 #devlovex #devlovexd
Itsuki Kuroda
テスト観点に基づくテスト開発方法論VSTePの概要
テスト観点に基づくテスト開発方法論VSTePの概要
Yasuharu Nishi
テストの組み立て方
テストの組み立て方
kauji0522
「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか
Yoshiki Hayama
LayerXのQAチームで目指したい動き方 (社内資料)
LayerXのQAチームで目指したい動き方 (社内資料)
mosa siru
3 Amigosの考え方で、独立したQAチームがアジャイルテストチームになるまでの話
3 Amigosの考え方で、独立したQAチームがアジャイルテストチームになるまでの話
Koichiro Takashima
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
「GebとSpockではじめるシステムテスト自動化」
「GebとSpockではじめるシステムテスト自動化」
Hiroyuki Ohnaka
Awsで実現するseleniumテスト高速術
Awsで実現するseleniumテスト高速術
finoue
Win7 * appium * androidで実機自動テストやってみた。
Win7 * appium * androidで実機自動テストやってみた。
Naoto Kishino
More Related Content
What's hot
Head First Inception Deck
Head First Inception Deck
Naoto Nishimura
Hatena::Letの式年遷宮
Hatena::Letの式年遷宮
Takafumi ONAKA
テストアプローチにデータ分析を使おう
テストアプローチにデータ分析を使おう
Sayaka Nakano
目grep入門 +解説
目grep入門 +解説
murachue
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
Yoshiki Hayama
アジャイルテスト -高品質を追求するアジャイルチームにおけるテストの視点-
アジャイルテスト -高品質を追求するアジャイルチームにおけるテストの視点-
Satoshi Masuda
解説!30分で分かるLEAN ANALYTICS
解説!30分で分かるLEAN ANALYTICS
しくみ製作所
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
Yoshiki Hayama
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
Yoshiki Hayama
品質とは何か.pdf
品質とは何か.pdf
kauji0522
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
Yoshiki Hayama
大企業アジャイルの勘所 #devlovex #devlovexd
大企業アジャイルの勘所 #devlovex #devlovexd
Itsuki Kuroda
テスト観点に基づくテスト開発方法論VSTePの概要
テスト観点に基づくテスト開発方法論VSTePの概要
Yasuharu Nishi
テストの組み立て方
テストの組み立て方
kauji0522
「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか
Yoshiki Hayama
LayerXのQAチームで目指したい動き方 (社内資料)
LayerXのQAチームで目指したい動き方 (社内資料)
mosa siru
3 Amigosの考え方で、独立したQAチームがアジャイルテストチームになるまでの話
3 Amigosの考え方で、独立したQAチームがアジャイルテストチームになるまでの話
Koichiro Takashima
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
Yoshiki Hayama
「GebとSpockではじめるシステムテスト自動化」
「GebとSpockではじめるシステムテスト自動化」
Hiroyuki Ohnaka
What's hot
(20)
Head First Inception Deck
Head First Inception Deck
Hatena::Letの式年遷宮
Hatena::Letの式年遷宮
テストアプローチにデータ分析を使おう
テストアプローチにデータ分析を使おう
目grep入門 +解説
目grep入門 +解説
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
アジャイルテスト -高品質を追求するアジャイルチームにおけるテストの視点-
アジャイルテスト -高品質を追求するアジャイルチームにおけるテストの視点-
解説!30分で分かるLEAN ANALYTICS
解説!30分で分かるLEAN ANALYTICS
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
あなたの手元の本よりいい方法がある! UXデザインのプロはこうやってユーザーのインサイトを確実に見つける
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
品質とは何か.pdf
品質とは何か.pdf
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
UXデザインを速く! 軽く! そして根拠をもって、回せ! すばやいユーザー調査からつなげるアジャイルUX
大企業アジャイルの勘所 #devlovex #devlovexd
大企業アジャイルの勘所 #devlovex #devlovexd
テスト観点に基づくテスト開発方法論VSTePの概要
テスト観点に基づくテスト開発方法論VSTePの概要
テストの組み立て方
テストの組み立て方
「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか
LayerXのQAチームで目指したい動き方 (社内資料)
LayerXのQAチームで目指したい動き方 (社内資料)
3 Amigosの考え方で、独立したQAチームがアジャイルテストチームになるまでの話
3 Amigosの考え方で、独立したQAチームがアジャイルテストチームになるまでの話
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
【2023年版】UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
「GebとSpockではじめるシステムテスト自動化」
「GebとSpockではじめるシステムテスト自動化」
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
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
SEGADevTech
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
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向上
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム
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の効果は?
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