読者です 読者をやめる 読者になる 読者になる

エンジニアをリングする

プログラをミングしたり。

my web site twitter

PICTでテストケースの組み合わせ爆発にさよならを

Advent Calendar

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割を占めるためである。

引用元: オールペア(ペアワイズ)法 - kguの日記

具体的な例を挙げると、 「Chromeモバイルプロジェクトプレゼンテーションモードを見たときにだけ」起きるようなバグの数は少ない、ということです。
バイルプロジェクトが原因ならプレビューモードでも起こりうるし、モバイルプロジェクト×プレゼンテーションモードが原因ならFirefoxで見ても起きる。
そういう2つ以下のパラメータによるバグが全体の不具合の大半を占めるので、2つの組み合わせの種類だけ網羅すればバグ検出確率はさほど落とさずに組み合わせの数をぐっと減らせるよ、というのがこの方法です。

どうやって2つの組み合わせを網羅するの?

MicrosoftOSSである、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です。これならがんばれる気がしてきますね。

もっと詳しく知りたい方はこちらの記事がおすすめです。

qiita.com

長めですが、わかりやすく面白くてとてもいい記事でした。

おわりに

もしも今後上記の組み合わせで検出できない3つ以上の組み合わせによるバグが発見されたら見直したいと思いますが、今のところは問題ないです。
本当は表示・アニメーション崩れも検出できる自動e2eテストができたなら理想的なのですが、自動テストだとしても事前にオールペア法で絞り込んだテストケースを実行したほうが待ち時間が減るので、どちらにしろ使えるなと思っています。

テキストベースのデータからコマンドラインでさくっと組み合わせを出せるのは助かりました。
おすすめです!

明日はGoodpatchの若きエース @inoino です ٩(ˊᗜˋ*)و