ブラウザ入力をスクリプトで自動化
name属性が複数あると「自動入力スクリプト作成スクリプト」がうまく動かないので修正版をid:murasuke:20051027にのせました
inputが200項目もある画面・・・
のテストを手入力するのはあんまりだ・・・と思ったので作ってみました。
（IE6用です）
仕組み
- IEのアドレス欄でJavaScriptを実行し、別ウィンドウをオープンします。
- そのウィンドウにはTextArea欄があります。
- そこに入力したJavaScriptをeval()で実行時評価します。
- オープンされたウィンドウは、window.openerプロパティーで親ウィンドウのDOMを操作することが可能なので、親ウィンドウの値の取得、変更を行うことができます。
- 親ウィンドウの<input><select>からデータの取得を行い、自動入力スクリプトを生成するスクリプトを実行し結果を保存することにより、利用者自らが複雑なスクリプトを書かずに自動入力できます。
１：別ウィンドウ（スクリプト実行ウィンドウ）の作成
IEのアドレス欄に書きスクリプトをコピーして、「移動」ボタンを押してください。
ボタンと、TextAreaのみの画面がポップアップします。
javascript:(function(){var doc = window.open('about:blank').document;doc.write("<script>var par=window.opener;var all=par.document.all;\r\nfunction execScr(){var src=scr.value;eval(src);}</script>\r\n");doc.write("<input type='button' value='Execute' onclick='execScr();'><br>\r\n<textarea id='scr' rows='30' cols='80'></textarea>");})()
２：自動入力スクリプト作成スクリプト実行
- １：で表示されたウィンドウのTEXTAREAに下記スクリプトをコピーし【Execute】ボタンをクリックして実行
- 親ウィンドウにセットされている値を復元するスクリプトが自動生成されます。（TEXTAREAに表示されます）
#なので親ウィンドウ側のデータが空っぽだとスクリプトの意味がないので、あらかじめデータが入っている状態が望ましいです
- 自動生成されたスクリプトをテキストとして保存しておきます。
scr.value = "";
var selNm = "";
var selIdx = 0;
var chkNm = "";
var chkIdx = 0;
dall = "all['";
var end = ";\r\n";
for( i = 0; i < par.document.forms.length; i++ )
{
frm = par.document.forms[i];
for( j = 0; j < frm.all.length; j++ )
{
tag = frm.all[j];
if( tag.type != undefined )
{
if( tag.type == "text" || tag.type == "textarea" )
{
scr.value += dall + tag.name + "'].value = '" + tag.value.replace(/\r\n/g, '\\r\\n') + "'" + end;
}
else if( tag.type == "checkbox" )
{
scr.value += dall + tag.name + "'].checked = " + tag.checked + end;
}
else if( tag.type == "radio" )
{
if( chkNm != tag.name ){ chkIdx = 0; chkNm = tag.name; }
scr.value += dall + tag.name + "'][" + chkIdx++ + "].checked = " + tag.checked + end;
}
else if( tag.type == "select-one" || tag.type == "select-multiple" )
{
if( selNm != tag.name ){ selIdx = 0; selNm = tag.name; }
}
}
else
{
if( tag.tagName == "OPTION" )
{
scr.value += dall + selNm + "'].options[" + selIdx++ + "].selected = " + tag.selected + end;
}
}
}
}
３：作成されたスクリプトの実行
例えばこんなFORMに対して自動入力スクリプト作成スクリプト実行してみます
<html>
<body>
<form name='nmform' id='idform'>
<P><INPUT id="idText1" type="text" name="Text1" value="text1">
<INPUT id="idText2" type="text" name="Text2" value="text2"></P>
<P><textarea id='idTextArea1' name="TextArea1" >textarea1</textarea></P>
<INPUT id="idCheckbox1" type="checkbox" name="Checkbox1" value="1" checked>CHECK1</INPUT>
<INPUT id="idCheckbox2" type="CHECKBOX" name="Checkbox2" value="2" >CHECK2</INPUT>
<INPUT id="idCheckbox3" type="checkbox" name="Checkbox3" value="3" checked >CHECK3</INPUT></P>
<P><INPUT id="idRadio1" type="radio" name="RadioGroup" value="1">Radio1</INPUT>
<INPUT id="idRadio2" type="RADIO" name="RadioGroup" value="2" checked>Radio2</INPUT>
<INPUT id="idRadio3" type="radio" name="RadioGroup" value="3">Radio3</INPUT></P>
<P><SELECT id="idSelect1" size="1" name="Select1">
<OPTION value="1">text1</OPTION>
<OPTION value="2" selected>text2</OPTION>
<OPTION value="3">text3</OPTION>
<OPTION value=""></OPTION>
</SELECT>
<SELECT id="idSelect2" multiple size="4" name="Select2">
<OPTION value="1" selected>multi1</OPTION>
<OPTION value="2">multi2</OPTION>
<OPTION value="3" selected>multi3</OPTION>
<OPTION value="4" selected>multi4</OPTION>
<OPTION value=""></OPTION>
</SELECT></P>
</form>
</body>
</html>
自動作成されるスクリプト
はこんな感じになります。
allという変数はポップアップするウィンドウ内で定義してあります
all['Text1'].value = 'text1'; all['Text2'].value = 'text2'; all['TextArea1'].value = 'textarea1'; all['Checkbox1'].checked = true; all['Checkbox2'].checked = false; all['Checkbox3'].checked = true; all['RadioGroup'][0].checked = false; all['RadioGroup'][1].checked = true; all['RadioGroup'][2].checked = false; all['Select1'].options[0].selected = false; all['Select1'].options[1].selected = true; all['Select1'].options[2].selected = false; all['Select1'].options[3].selected = false; all['Select2'].options[0].selected = true; all['Select2'].options[1].selected = false; all['Select2'].options[2].selected = true; all['Select2'].options[3].selected = true; all['Select2'].options[4].selected = false;
ポップアップするウィンドウ
は、かなり手抜きWindowです。（最低限動くのみ）
<script>var par=window.opener;var all=par.document.all;
function execScr(){var src=scr.value;eval(src);}</script>
<input type='button' value='Execute' onclick='execScr();'><br>
<textarea id='scr' rows='30' cols='80'></textarea>
