JavaScriptでフォームの自動入力を実現する!テスト時の面倒な入力とおさらば!

javascript

こんにちは。菜笑なえです。

JavaScriptでフォームの自動入力を実現する方法について書いていきます。

テスト時に何度も同じ項目を入力することに疲れている方は必見です。

自動入力までの手順

  • save_formvalue.js を用意
  • フォームのあるHTMLでscriptを設定
  • Console で実行

詳細コード

save_formvalue.js を用意

// フォーム値を取得してlocalStorage に保存
function getFormValue(storage_key, form) {
  var active_form, params, targets;
  params = {};
  active_form = $(form);
  targets = 'input[type=text], textarea, input[type=number], input[type=hidden], select';

  $(targets, active_form).each(function() {
    // key:name属性 val:フォーム値
    params[$(this).attr('name')] = $(this).val();
  });

  // 削除したい要素のkeyを記述
  delete params['utf8'];
  delete params['authenticity_token'];

  localStorage.setItem(storage_key, JSON.stringify(params));
};

// 過去の入力値を呼び出して利用
function setFormValue(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]);
    }
  }
}

保存したくない要素がある場合は、この部分に記述します。
キーにinputタグのname属性を指定してください。

  // 削除したい要素のkeyを記述
  delete params['utf8'];
  delete params['authenticity_token'];
  delete params['name属性'];

フォームのあるHTMLでscriptを設定

フォームのあるHTMLにこちらを設置。

<script>
  setFormValue('formName');
</script>

Console で実行

フォームに値を入力後、ディベロッパーツールのConsoleで以下を実行。
値をlocalStorage に保存できます。

getFormValue('formName', 'form');

値がlocalStorage に保存されているかを確認。

localStorage.getItem('formName');

注意点

チェックボックスとラジオボタンには対応していないので、手で入力する必要があります。

おわりに

フォームのテストするときは、何十回と入力しないといけないので、これを入れることでかなり効率をあげることができました!

改良して未対応の入力項目にも対応していきたいと思います。

参考文献

ありがとうございます!

SNS

Twitter:@nae310_
Instagram:310nae