ロケーター探しのお供に エレメント情報を可視化するJSブックマークレット

対象のエレメントのロケータを上手に指定するのはseleniumerの日々の悩みです。

開発者が自由に作ったUI画面と格闘しています。

そんなときのちょっと便利ツールを作ってみました。

ボタン一つでエレメントのName、ID、Value属性を、可視化してくれます。

なつかしのブックマークレットでつくってみました。
こちらを改行無しで適当なブックマークのURLに入れて使います。

 javascript:d=document;b=d.body;g=new Array("input","textarea","select","button");for(j=0;j<g.length;++j){t=b.getElementsByTagName(g[j]);for (i=0;i<t.length;++i){v=t[i];if(v.type!="hidden"){c=d.createElement('span');c.style.fontSize = '11px';c.style.padding = '5px';c.style.display = 'block';c.style.border = '1px solid red';c.innerHTML="name:" + v.name +"/"+"id:"+v.id+"/val:"+v.value; v.parentNode.appendChild(c);}}}

さっそくためしてみました。

某婚活系のサイトのレジスト画面です。

あらかじめブックマークバーに登録しておいたブックマックレットののボタンをクリック。

すると

各エレメントの下にName/ID/Valueが表示されます。

これはロケーターの検証時に良さそうですね。

テストスクリプトを書くのが少しだけ捗りそうです。

おしまい。