このページについて
テストを行う際に、「URLは同じだが、内容の違うページがある。片方はテストを実行したいが、もう片方ではテストを実行したくない…」と困ったことはありませんか？
本項では、そういった場合の解決法をご案内します。
※エクスペリエンススクリプトに記述したJavaScriptは、エクスペリエンスが実行されるページにてKaizen対象外ユーザー・オリジナル案・デザイン案全てに実行されます。思わぬ不具合に繋がる可能性がありますので、十分に動作確認をしてから記述をしてください。なお、ご利用は自己責任にてお願いいたします。
※エクスペリエンススクリプトを使った方法をご案内しています。
※エクスペリエンススクリプトは使用方法を誤ると、デザインが反映されない・計測ができない等の問題が発生する可能性があります。→ラウンド開始前に計測ができているか確認しましょう。
※ここではサンプルコードを公開していますが、より複雑なコードの提供や、お客様のページに合わせたコードの提供は、サポート対象外となっております。ご了承ください。
こんなシチュエーションはありませんか？
冒頭に書いたように、同じURLだが、どちらかのみテスト実行したい。
例1）ログイン前・ログイン後でURLは一緒だが、ログイン後のページだけテスト対象にしたい
例2）フォームの入力画面と確認画面のURLが同じだが、確認画面はテスト対象にしたくない
これらはエクスペリエンススクリプトを使えば実現できます。
エクスペリエンススクリプトについてはこちらのヘルプをご覧ください。
エクスペリエンススクリプトを記述するための準備
エクスペリエンススクリプトを設定するまでの手順は以下の通りです。
①同一URLのページを見比べ、違いを見つける
②要素を見比べる
③見つけた要素が固有のものかを確認する
④エクスペリエンススクリプトに落とし込む
①同一URLのページを見比べ、違いを見つける
※ここではブラウザは、Google Chromeを使用します。
今回デモのために、架空の通販ページをご用意しました。
(架空の通販ページのため、実際にお買い物することはできません。また、動作するリンクはログイン/ログアウトと商品リンクのみとなっており、本物のログイン機能は実装されておりません。)
テストケースは、「ログインユーザーのみテストを実行したい」とします。
ログイン前もログイン後も、URLが同じなので、このままではログインしていないユーザーにもテストが実行されてしまいます。
では、ログイン前とログイン後のページを見比べてみましょう。
↓ログイン前↓
↓ログイン後↓
ログイン後は、ユーザーの名前が表示されるようになりました。実際、こういった仕様のページは多いと思います。
このように、見た目でわかる、ページ間の違いを見つけてください。
②要素を見比べる
違いを見つけたら、今度はその部分の要素を見比べます。
windowsはF12、macではoption+command+iを押下して、Chromeの検証を開いてください。
該当部分の要素を調べるには、下記の図のように、選択モードを使うと簡単です。
では、ログイン前とログイン後で、要素を見比べてみます。
↓ログイン前↓
↓ログイン後↓
ログイン後のページでは、「username」というクラス名がつけられたspan要素が増えています。
この要素の有無で、テストを実行する/しないを分けられそうです。
③見つけた要素が固有のものかを確認する
次に、先ほどログイン後のページで見つけた「username」というクラス名が、ログイン前では使われていないことを確認します。
ログイン前のページへ戻り、command+f(windowsはcontrol+f)で要素を検索できるので、「.(ドット)username」でクラスを検索します。(IDを検索するときはID名に「#(シャープ)」をつけます。)
検索結果は「0 of 0」となっているので、ログイン前のページには「username」というクラス名を持つ要素が存在しないことがわかりました。
これで、この要素の有無で、テストを実行する/しないを分けることが確実にできるようになりました。
④エクスペリエンススクリプトに落とし込む
改めて今回のテストケースを整理すると、
「ログイン済みのユーザーのみ、テストを行いたい＝ページ内に「username」というクラス名を持つ要素が存在する時のみテストを行いたい」
となります。
これをエクスペリエンススクリプトで条件分岐すると、こうなります。
| return new Promise(function(resolve, reject) { $(function() { if ($('.username').length > 0) { resolve(); } else { reject(); } }); }); |
「.length」は、要素の数を取得します。要素が存在しない場合は「0」になるので、今回は0より大きい場合＝「username」というクラス名を持つ要素が存在する場合にテストを実行するコードを書いています。
このコードをエクスペリエンスの詳細設定 > エクスペリエンススクリプトに反映させます。
ログイン前とログイン後のページを確認し、ログイン後のページのみでテストが実行されていることが確認できたら、完了です。
(こちらの「古いエクスペリエンスが残っている？」を参考に、現在行われているテストを確認してください。)
その他のエクスペリエンススクリプト
参考になりそうな簡単なスクリプトを記載しますので、適宜内容を変更してお使いください。
※エクスペリエンススクリプトは使用方法を誤ると、デザインが反映されない・計測ができない等の問題が発生する可能性がありますので、ご利用は自己責任でお願いします。
※より複雑なコードの提供や、お客様のページに合わせたコードの提供は、サポート対象外となっております。ご了承ください。
| //ある要素が存在する時にテスト実行 return new Promise(function(resolve, reject) { $(function() { if ($('#username').length > 0) { //'#username'をトリガーにしたい要素名に変えてください resolve(); } else { reject(); } }); }); |
| //ある要素が存在しない時にテスト実行 return new Promise(function(resolve, reject) { $(function() { if ($('#username').length === 0) { //'#username'をトリガーにしたい要素名に変えてください resolve(); } else { reject(); } }); }); |
| //ある要素のテキスト(情報)が'example'だったらテスト実行する return new Promise(function(resolve, reject) { $(function() { var kz_text = $('#huga').text(); //'#huga'をテキストをトリガーとしたい要素名に変えてください kzs.console.log(kz_text); //取得したテキストを確認 if (kz_text == 'example') { //テストを実行したい時のテキストを書いてください resolve(); } else { reject(); } }); }); |
| //ある要素のテキスト(情報)が'example'以外でテスト実行する('example'だった場合は実行しない) return new Promise(function(resolve, reject) { $(function() { var kz_text = $('#huga').text(); //'#huga'をテキストをトリガーとしたい要素名に変えてください kzs.console.log(kz_text); //取得したテキストを確認 if (kz_text != 'example') { //テストを実行したくない時のテキストを書いてください resolve(); } else { reject(); } }); }); |
0 コメント