フォーム周りの修正は、コード変えて入力動作テストの繰り返しにイライラ💢
Seleniumも修正ごとに対応面倒で、基本はfirefoxのみだし😵
テストコード修正するのは、もう少し実装イメージが固まってからって時の
簡単にフォーム自動入力ができるjs関数を作ってみました。
1回、ブラウザのコンソールで実行すれば
入力履歴で呼び出すだけで、自動入力が再現できて幸せになりました✨
即席だからまだ改善必要なコードですが^^;
今の状態でも幸せになったので、qiitaにいったんあげてみました。
前提
- jquery を使っているサイト
動作確認
- chrome
- Mac X
- Rails form
- jQuery
1.1コピペで、フォーム値を保存
フォームに入力した状態で、ブラウザコンソール上で下記をコピペ実行。
ブラウザのローカルストレージに指定したキーで保存されます。
複数フォームがある場合を想定して、対象のフォームのセレクタを必由に応じて指定。
キー名をパターン別に保存して使い分けたり。
※TODOメモ：ラジオボタンは、ちょっと工夫が必要みたいなのでまた追って
// フォーム値を取得してlocalStorage に保存
// ※フォーム入力画面で入力後に実行 ※TODO:radio対応
function getFormValSet(storage_key, form) {
var active_form, params, targets;
params = {};
active_form = $(form);
targets = 'input[type=text], textarea, input[type=hidden], input[type=url], input[type=checkbox]:checked, select';
$(targets, active_form).each(function() {
// key:name属性 val:フォーム値
params[$(this).attr('name')] = $(this).val();
});
delete params['utf8'];
delete params['authenticity_token'];
localStorage.setItem(storage_key, JSON.stringify(params));
};
getFormValSet('valid_form', 'form');
2.1コピペで、過去の入力値を呼び出して利用(自動入力)
1.を実行したフォームで、リロード後、再度入力送信したい時、下記をコピペ実行。
すると、1.で保存したフォーム値が入ります。
// 過去の入力値を呼び出して利用
// ※新しいフォーム画面で実行
function setFormVal(storage_key){
params = JSON.parse(localStorage.getItem(storage_key));
for(var key in params){
if("hidden" != $("[name='"+key+"']").attr("type")){
$("[name='"+key+"']").val(params[key]);
}
}
}
setFormVal('valid_form');
3.履歴で呼び出して何度も自動入力
ブラウザコンソール上で「↑」ボタンで履歴で、2. を呼び出せばok
4.不要になったら削除
下記をコピペ実行
//要らなくなったフォームデータを削除
localStorage.removeItem(storage_key)
最後に(ゆくゆくは)
上にあげた方法は、ブラウザコンソールを開いて貼り付けて実行する必要があるので
ブックマークレットでポチポチっとできるところまで改修できたりしたらいいなぁなんて。
探していたら 近しいことをされているものがありました↓
ただ、自分が今、作成しているフォームでは使えなかったので、
いったん、今は、フォーム値取得してストレージに保存しておいて
呼び出すみたいなものをコンソールで実行するようなもので対応しました
これだけでも何回も動作確認で入力するよりは幸せ＾＾