PICTでテストケースの組み合わせ爆発にさよならを
Goodpatch Advent Calendar 2016 13日目の記事です!
わたしはGoodpatchでProttというプロトタイピングツールのWebフロントエンドの開発を担当しています。
Prottでは、プロトタイプの再生に関する修正をしたあとは必ず全動作を網羅したテスト用プロジェクトでの動作確認を行っています。
ただ、すべての環境や条件を揃えた上でのテストにはなかなかの工数がかかってしまっていました。
この記事では、オールペア法という手法とPICTというCLIツールを使用してテスト工数を半分以下に削減した方法を紹介します。
単純に全組み合わせ
推奨環境としているOSやブラウザと3種類の再生モードを組み合わせると、テストすべき組み合わせは全部で20パターンになります。
(プレビューモードとプレゼンテーションモードは対PC、スタンドアロンモードは対モバイルのモードです。)
- Mac - Chrome - モバイル向けプロジェクト - プレビューモード - プレゼンテーションモード - PC向けプロジェクト - プレビューモード - プレゼンテーションモード - Firefox - モバイル向けプロジェクト - プレビューモード - プレゼンテーションモード - PC向けプロジェクト - プレビューモード - プレゼンテーションモード - Safari(プレゼンテーションモードのみ) - モバイル向けプロジェクト - プレゼンテーションモード - PC向けプロジェクト - プレゼンテーションモード - Windows - Chrome - モバイル向けプロジェクト - プレビューモード - プレゼンテーションモード - PC向けプロジェクト - プレビューモード - プレゼンテーションモード - Firefox - モバイル向けプロジェクト - プレビューモード - プレゼンテーションモード - PC向けプロジェクト - プレビューモード - プレゼンテーションモード - iOS - Safari - モバイル向けプロジェクト - スタンドアロンモード - Android - Chrome - モバイル向けプロジェクト - スタンドアロンモード
環境の準備+実行でひとつ2分かかるとすると、40分です。
加えてこれをそれぞれプレ本番環境と実際の本番環境でおこなうため、だいたい80分ほどになります。きつい。
オールペア(ペアワイズ)法ってなに?
組み合わせテスト技法の1つであるオールペア(ペアワイズ)法では、すべてのパラメータについて少なくとも、2パラメータ間での値の組み合わせが網羅されるようにテストパターンを作成する。 2パラメータ間で値の組み合わせが網羅されるようにテストパターンを作成する理由は、統計的に2パラメータ間までで発生する不具合が7~9割を占めるためである。
具体的な例を挙げると、 「Chrome
でモバイルプロジェクト
のプレゼンテーションモード
を見たときにだけ」起きるようなバグの数は少ない、ということです。
モバイルプロジェクトが原因ならプレビューモードでも起こりうるし、モバイルプロジェクト×プレゼンテーションモードが原因ならFirefoxで見ても起きる。
そういう2つ以下のパラメータによるバグが全体の不具合の大半を占めるので、2つの組み合わせの種類だけ網羅すればバグ検出確率はさほど落とさずに組み合わせの数をぐっと減らせるよ、というのがこの方法です。
どうやって2つの組み合わせを網羅するの?
MicrosoftのOSSである、PICTというCLIツールを使うと簡単にリストアップできます。
https://github.com/Microsoft/pict
(Windowsだと他にもオールペア法のGUIツールやExcelのマクロがあるようですが、Macでは↑だけのようです。)
インストール
# リポジトリをクローン $ git clone https://github.com/Microsoft/pict.git $ cd pict/ $ make # 成功したらpictコマンドのパスを通す $ sudo install -m 0755 pict /usr/local/bin/pict
引用元: テストの数を減らそう!プリキュアで学ぶPICT - Qiita (後ほど紹介します)
組み合わせるパラメータを定義するtxtファイルの作成
基本的なパラメータのリストアップ
まずは基本的なパラメータを分解してリストアップします。
さっき書いた全組み合わせのリストでは、OS/Browser/Project/Modeの順に階層が深くなっていました。
それをそのまま使いましょう。
以下の内容で test.txt
というテキストファイルを作成します。
os: mac, win, ios, android browser: chrome, firefox, safari project: mobile, web mode: preview, presentation, standalone
これを単純に全て組み合わせると、 4 * 3 * 2 * 3 = 72
で72パターンです。
さっきの20パターンよりだいぶ多いですね。追加条件がなく、Windows×Safariのような存在しない組み合わせも含まれてしまっているためです。
不要なパターンの除外
Windows×Safariの条件を除外してみましょう。最後の行を追加します。
os: mac, win, ios, android browser: chrome, firefox, safari project: mobile, web mode: preview, presentation, standalone if [os] = "win" then [browser] <> "safari";
<>
は否定です。かんたん!
次に、iOSのBrowserをSafariに限定する条件を追加してみます。
os: mac, win, ios, android browser: chrome, firefox, safari project: mobile, web mode: preview, presentation, standalone if [os] = "win" then [browser] <> "safari"; if [os] = "ios" then [browser] = "safari";
こちらも簡単ですね。
さっき書いた全組み合わせのリストで加味していた条件をすべて追加してみましょう。
os: mac, win, ios, android browser: chrome, firefox, safari project: mobile, web mode: preview, presentation, standalone if [mode] = "preview" then [browser] <> "safari"; if [os] = "mac" then [mode] <> "standalone"; if [os] = "win" then [mode] <> "standalone"; if [os] = "win" then [browser] <> "safari"; if [os] = "ios" then [browser] = "safari"; if [os] = "ios" then [project] = "mobile"; if [os] = "ios" then [mode] = "standalone"; if [os] = "android" then [browser] = "chrome"; if [os] = "android" then [project] = "mobile"; if [os] = "android" then [mode] = "standalone";
結果を出力してみます。
$ pict test.txt os browser project mode win firefox web preview mac safari mobile presentation android chrome mobile standalone win chrome web presentation mac chrome web preview ios safari mobile standalone win firefox mobile presentation mac firefox mobile preview mac safari web presentation
並べてみます。
os browser project mode ------------------------------------ mac chrome web preview mac firefox mobile preview mac safari web presentation mac safari mobile presentation win chrome web presentation win firefox web preview win firefox mobile presentation ios safari mobile standalone android chrome mobile standalone
2種類の組み合わせが網羅された9パターンが出力されました!
横方向に見た組み合わせでテストすればOKです。これならがんばれる気がしてきますね。
もっと詳しく知りたい方はこちらの記事がおすすめです。
長めですが、わかりやすく面白くてとてもいい記事でした。
おわりに
もしも今後上記の組み合わせで検出できない3つ以上の組み合わせによるバグが発見されたら見直したいと思いますが、今のところは問題ないです。
本当は表示・アニメーション崩れも検出できる自動e2eテストができたなら理想的なのですが、自動テストだとしても事前にオールペア法で絞り込んだテストケースを実行したほうが待ち時間が減るので、どちらにしろ使えるなと思っています。
テキストベースのデータからコマンドラインでさくっと組み合わせを出せるのは助かりました。
おすすめです!
明日はGoodpatchの若きエース @inoino です ٩(ˊᗜˋ*)و