エンジニアをリングするスマートフォン用の表示で見るエンジニアをリングするプログラをミングしたり。13日目の記事です!わたしはGoodpatchでProttというプロトタイピングツールのWebフロントエンドの開発を担当しています。Prottでは、プロトタイプの再生に関する修正をしたあとは必ず全動作を網羅したテスト用プロジェクトでの動作確認を行っています。すべての環境や条件を揃えた上でのテストにはなかなかの工数がかかってしまっていました。この記事では、オールペア法という手法とPICTというCLIツールを使用してテスト工数を半分以下に削減した方法を紹介します。単純に全組み合わせ推奨環境としているOSやブラウザと3種類の再生モードを組み合わせると、テストすべき組み合わせは全部で20パターンになります。(プレビューモードとプレゼンテーションモードは対PC、スタンドアロンモードは対モバイルのモードです。スタンドアロンモード環境の準備+実行でひとつ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では↑だけのようです。基本的なパラメータのリストアップまずは基本的なパラメータを分解してリストアップします。さっき書いた全組み合わせのリストでは、OS/Browser/Project/Modeの順に階層が深くなっていました。それをそのまま使いましょう。いうテキストファイルを作成します。さっきの20パターンよりだいぶ多いですね。追加条件がなく、Windows×Safariのような存在しない組み合わせも含まれてしまっているためです。不要なパターンの除外Windows×Safariの条件を除外してみましょう。最後の行を追加します。"safari";<>は否定です。かんたん!次に、iOSのBrowserをSafariに限定する条件を追加してみます。"safari";こちらも簡単ですね。さっき書いた全組み合わせのリストで加味していた条件をすべて追加してみましょう。"standalone";結果を出力してみます。presentation並べてみます。standalone2種類の組み合わせが網羅された9パターンが出力されました!横方向に見た組み合わせでテストすればOKです。これならがんばれる気がしてきますね。詳しく知りたい方はこちらの記事がおすすめです。qiita.com長めですが、わかりやすく面白くてとてもいい記事でした。おわりにもしも今後上記の組み合わせで検出できない3つ以上の組み合わせによるバグが発見されたら見直したいと思いますが、今のところは問題ないです。本当は表示・アニメーション崩れも検出できる自動e2eテストができたなら理想的なのですが、自動テストだとしても事前にオールペア法で絞り込んだテストケースを実行したほうが待ち時間が減るので、どちらにしろ使えるなと思っています。テキストベースのデータからコマンドラインでさくっと組み合わせを出せるのは助かりました。25歳は20代後半ではない。»はてなブログをはじめよう!yoshiko_pgさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。