【JavaScript】フィールドの型に関わらずブラウザ上の既存フォームから任意の値を submit する方法

　よくフォームの動作についてテストを行うときがあります。この時、フォームの入力欄を一つ一つ手作業で入れるのは手作業で入れること自体に意味がなければ（ユーザビリティのテストとか動的バリデーションのテストとかなら有効）時間がかかるばかりで無駄です。この記事ではそういったフォームに値を入力する方法を紹介します。
　オートコンプリート抜きにフォームに値を自動で入力する方法には例えばブックマークレットがあります。しかし input の type 属性やバリデーションによって入力されない場合があります。そういった時は JavaScript 上でフォーム要素を乗っ取るのが便利です。
【JavaScript】テストやドキュメント作成で便利なスニペット紹介 – 株式会社シーポイントラボ ｜ 浜松のシステム・RTK-GNSS開発
　具体的には次です。

(() => {
    // 対象のフォームを指すセレクタを入れる
    const formElement = document.querySelector('form')
    // @see https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/elements
    // フォーム要素以下のフィールド要素のみを総ざらいして name を取得
    const fieldNames = formElement.elements.map(fieldElement => fieldElement.name)
    // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/formdata_event
    // フォームデータが構築された時のイベント。フォーム要素の持つフォームデータを参照
    formElement.addEventListener("formdata", eve => {
        // 先に得たフィールドの name に従ってフォーム要素の持つフォームデータに任意の値を書き込み
        // ここではランダム文字列（ランダムな値の32進数表記の小数点未満）。
        fieldNames.forEach(name => eve.formData.append(name, Math.random().toString(32).substring(2)));
    })
    // 強制的にフォームを送信
    formElement.submit();
})();

　これを実行すればフォームに値を組み込んで元々ページにあったフォームとして任意の値を送信できます。フロントエンドのバリデーターの実装によってはこれでも止められることがあるかもしれませんが、input の type に左右されずとりあえず値を送れる、という点でこのスニペットは有効です。即座に実行するにはやはりブックマークレット（javascript:${JavaScriptコード}をURLにしたブックマーク。ブックマークを開くとJavaScriptコードが実行される）にするのが便利です。