目次
はじめに
こんにちは。先日WordBench新潟の勉強会に参加してきました。勉強会も懇親会も有意義で、とてもおもしろかったです。
その中で「フォームの入力って結構面倒ですよね」というお話になりました。
こういったWeb制作でのフォームのテストって面倒ですよね。
（あっ、ここでのテストはユニットテストとかの「テスト」ではなくて、もうちょっと広義な、フォームに文字を入力して、チェックボックスを埋めて、送信して…、というやつです。）
このフォームのテストって自動で埋めることができるんですね。その方法についてまとめてみました。
問い合わせフォーム
今回はテスト用にWordPressで問い合わせフォームを作りました。非常に素晴らしい「MW WP Form」というプラグインがありまして、そちらで制作しました。（本当に便利です!)
フォームはこんな感じです。
ブックマークレットを作る
MacのChromeでテストしています。
Chromeには表示中のページに「ブックマークレット」というJavaScriptを走らせるための機能があります。
こちらを利用してフォームを埋めます。
まずはブックマークバーを表示状態にしておきます。
ブックマークバーが表示されていない場合には、ツールバーの「表示 ＞ 常にブックマークバーを表示する」から表示させておきます。
ブックマークバーを右クリックして「ページを追加」を選びます。
「名前」にはブックマークバーでの表示名、「URL」に走らせたいJavaScriptを書きます。
まずは動いているかのテストをするために、自動化が発動したことをログに取らせるようにしました。
javascript:{console.log('押しました！');}
この状態で保存します。
ブックマークバーに追加されていますので、開発者コンソールを表示してクリックしてみます。
出ましたね！
フォームを埋める
実際にフォームを埋めるコードにしてみます。
ブックマークレットの項目を右クリックして「編集」を選びます。
ここのJavaScriptを実際にフォームを埋めるようにコードを書きます。
javascript:{console.log('押しました！'); jQuery("input[name='name']").val('ここに素晴らしいお名前が入ります');}
押してみます。
入りました！
これでフォームテストの時に自動化することが出来ます。
注意点とか
ブックマークレットとして保存する際に、日本語はURLエンコード（パーセントがたくさん出るやつ）されます。
後で編集する時に読みづらいので我慢が必要です。
改行
分かりにくいですが、改行付きのコードも貼り付けることができます。
編集をもっと早くする
実際に開発を行っていると、自動化コードの微調整もひつようになりますよね。
この編集ウィンドウは小さいため、コードを他のファイルに書いておくと便利です。
HTTP(HTTPS）でアクセスできる他のJavaScriptファイルを用意しておいてそちらにフォームを埋めるコードを書きます。
ブックマークレット側ではこのJavaScriptファイルを呼び出すようにします。
下記のコードでの4行目のs.srcに呼び出したいJavaScriptファイルへのURLを入れておきます。
javascript:{
(function () {
var s=document.createElement('script'); s.type='text/javascript'; s.src='http://ex1.dev/test.js';
document.getElementsByTagName('head')[0].appendChild(s);}());
}
上記のコードではローカル開発環境でhttp://ex1.dev/test.jsでアクセスできるようにしました。
こうすることでブックマークレットのクリック時にJavaScriptファイルを呼び出すことが出来ます。
ただし一般的なJavaScriptの埋め込みと同様に、HTTPSのMixedContentや脆弱性の注意が必要です。
外部の悪意のあるJavaScriptへのリンクを入れない限りは大丈夫だと思いますが、脆弱性については各自ご注意ください。
保存場所について
ChromeのこのブックマークレットはJSONファイルで保存されています。
Macであれば下記のパスにありました。
/Users/yousan/Library/Application Support/Google/Chrome/Default/Bookmark
こちらのファイルを編集すれば良いのではないか…と思ったのですが、こちらは動的に読み込みされないようで、Chromeの再起動が必要でした。
今回のコードを作るにあたって
今回のブックマークレット自動化を作るきっかけは、ペアプロでフロント屋さんと開発していた際に「これってブックマークレット良いんじゃないですか？」と言われたことでした。
実際に作ってみるとすごく便利で、自分は発想が無かったのでさすがフロント屋さんだなぁ、とすごく感心しました。
ちなみにフォームだけではなくて、iframeの挿入やその他にJSで行いたい作業をページをまたいで実行することができます。
「ページをまたいで」という箇所が重要で、似たような要素名で問い合わせフォームを作っている場合には、名前、メールアドレス、電話番号などをだいたい使いまわすことができるのですごく便利です。
ただし「Chromeのブックマークレットで自動化便利！」なんですが、そもそも論として、ページ内にテスト用コードを貼り付けておく、という選択肢もあります。
そのあたりで面白い手法などありましたらどんどん試していきたいですね。
では、よい自動化ライフを！