1. まとめトップ

【Java】Seleniumを使って試験を自動化しよう ~入力編~【How To】

ブラウザ操作をするに辺り必須事項とも言える入力フォームへの自動入力又は操作だと思います。ここではその説明を行いたいと思います。・テキストフィールド(テキストエリア)<br>・チェックボックス・プルダウン・ラジオボタン・ボタン(サブミット)などー

更新日: 2014年05月29日

1 お気に入り 20590 view
お気に入り追加

通常ブラウザを使用する場合は、人間の手でマウス操作を行いクリックをしたり、キーボードで入力などを行います。
では、それをどの様に自動化するのかを記載します。

Seleniumでは、タグで記載されているテキスト入力、プルダウン、チェックボックスなどはWebElementを使用して操作を行います。 肝心なのは、操作をする為の要素を予め特定しなければなりません。その場合、どのように特定するかを記載します。

■タグを特定するには?

タグを特定するには、いくつか方法があります。

①. XPathを使用する。
②.要素(タグ)を指定する。
③.属性を指定する。
④.タグに囲まれたテキスト情報で特定する。

①:XPathとは構造化文書であるXMLに記載されている情報を特定する為に使用する操作方法です。HTMLはXML同様に構造化文書になっており記載ルールも大体一緒なので、使用できます。 実際は違うところもいくつかありますが、ここで説明する話ではないので割愛します。
②:要素(タグ)を指定するとは言葉通りで、例えばテキストフィールドを取得したい場合はタグ名がinputとなっているのでinputを指定します。
③;属性を指定するとは要素の付加(追加)情報だと思えばよいです。 
指定のタグまで指定した際の戻り値はWebElementオブジェクトになります。 WebElementを使用して指定されたタグの操作(入力、チェック、ボタン押下)が行うことができます。

■解析用サンプルソース

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sample1</title>
<style type="text/css">
<!--
iro { color: red; }
-->
</style>
</head>
<body>
<!-- 日本語コメント -->
<form name="form1" action="./sample2.html">
<input type="text" name="text1" /><br/>
<input type="button" name="button" value="button" /><br/>
<input type="checkbox" name="abc" value="1" checked /><br/>
<input type="checkbox" name="abc" value="2" /><br/>
<input type="radio" name="radio" value="1" /><br/>
<input type="radio" name="radio" value="2" checked /><br/>
<input type="image" name="image1" src="../image/rira_hiko.ico" /><br/>
<textarea name="tarea" rows="4" cols="50" ></textarea><br/>
<select name="select1"><br/>
<option>2013/1/1</option>
<option>2014/1/1</option>
<option>2015/1/1</option>
</select><br/>
<iro>CSSで色を変えてみる</iro><br/>
<a id="link_id" class="link_class" href="test.co.jp">abcdlink</a><br/>
<input type="submit" value="goto sample2"/><br/>
</form>
<form name="test2">
<input type="checkbox" name="abc" value="1" />
</form>
</body>
</html>

最初は、上記①、②、③のタグ特定方法になります。

サンプルソースを読み込んでinput type="submit"を特定してみます。

XPathを使用した方法 By.xpath(String)

HtmlUnitDriver uDriver = new HtmlUnitDriver(BrowserVersion.INTERNET_EXPLORER_10);
uDriver.get("file://C:\\sample.html");
//input type=submitを特定する場合
WebElement submitElement = uDriver.findElement(By.xpath("//input[@type='submit']"));

要素を指定した方法

HtmlUnitDriver uDriver = new HtmlUnitDriver(BrowserVersion.INTERNET_EXPLORER_10);
uDriver.get("file://C:\\sample.html");
//input type=submitを特定する場合
WebElement submitElement = uDriver.findElement(By.tagName);

リンク(aタグ)に囲まれたテキストで特定する場合

WebElement linkElement = uDriver.findElement(By.linkText("abcdlink"));
System.out.println("Linktest tag name = "+linkElement.getTagName());

※linkTextは日本語では以下のエラーがでました・・・abcdlinkをあああに変えてやってみたら以下の結果に・・・
そういうもんなん?

Exception in thread "main" org.openqa.selenium.NoSuchElementException: No link found with text: あああ

色々調べてみたところHTMLファイルにcharsetがきっちり指定した場合は文字化せずに日本語を取得することが判明 ファイルエンコードがUTF-8になっているから問題ないかと思ったけどそうでもないっぽい。 metaタグにcharsetをUTF-8できっちり指定したら取得できるようになりました。

では、metaが無い場合、つまり元のエンコーディングはなんだろうとおもい、日本語部分を色々エンコードして試してみたところ以下の結果になりました。

System.out.println(System.getProperty("file.encoding"));
System.out.println("css text endcode = " + cssElement.getText());
System.out.println("css text endcode = " + new String(cssElement.getText().getBytes(),"UTF-8"));
System.out.println("css text endcode = " + new String(cssElement.getText().getBytes(),"MS932"));
System.out.println("css text endcode = " + new String(cssElement.getText().getBytes(),"Shift-JIS"));
System.out.println("css text endcode = " + new String(cssElement.getText().getBytes(),"EUC-JP"));
System.out.println("css text endcode = " + new String(cssElement.getText().getBytes(),"ISO-8859-1"));
System.out.println("css text endcode = " + new String(cssElement.getText().getBytes(),"UTF-16"));
System.out.println("css text endcode = " + new String(cssElement.getText().getBytes(),"ISO-2022-JP"));

UTF-8
css text endcode = CSSで色を変えてみる
css text endcode = CSSで色を変えてみる
css text endcode = CSSテ」ツ�ァティツ可イテ」ツつ津・ツ、ツ嘉」ツ�暗」ツ�ヲテ」ツ�ソテ」ツつ�
css text endcode = CSSテ」ツ�ァティツ可イテ」ツつ津・ツ、ツ嘉」ツ�暗」ツ�ヲテ」ツ�ソテ」ツつ�
css text endcode = CSS達�則竪�族達��奪造�達��達�側達�多達��
css text endcode = CSSで色を変えてみる
css text endcode = 䍓參ꏂ臂观닃ꏂ苂鋃꓂觃ꏂ臂裃ꏂ臂ꏂ臂뿃ꏂ苂�
css text endcode = CSS������������������������������������������������

結局なんなのかわからない。
というのは、metaを使ってないとはいえファイルの文字コードはUTF-8にしてました。なので、ブラウザで開いたときのエンコーディングは
ファイルと同様UTF-8になっていました。なのに、getTextしたときにデフォルトは文字化けするわUTF-8に念のためしても文字化けるわで意味不明。
getTextしたときの文字コードはなんなんだろう・・・。ソースを追ってみたところDomNodeというパースして格納したタイミングで既に文字化けになっていたので
ネイティブ側による処理の可能性が高い。結論としては、metaタグでちゃんと文字コード設定すること。
ちなみにmetaタグを定義した場合の結果は、以下のようになる。

css text endcode = CSSで色を変えてみる
css text endcode = CSSで色を変えてみる
css text endcode = CSS縺ァ濶イ繧貞、峨∴縺ヲ縺ソ繧�
css text endcode = CSS縺ァ濶イ繧貞、峨∴縺ヲ縺ソ繧�
css text endcode = CSS�ц��������帥�
css text endcode = CSSで色を変えてみる
css text endcode = 䍓口膧닣芒解膈膿�
css text endcode = CSS������������������������

ちゃんとUTF-8エンコード箇所はでています。

リンク(aタグ)に囲まれたテキストの一部で特定する場合(俗に言う部分一致というやつ)

//aタグに囲まれたテキスト情報の一部から特定する。
WebElement plinkElement = uDriver.findElement(By.partialLinkText("cdli"));
System.out.println("Partial Linktest tag name = "+linkElement.getTagName());

Partial Linktest tag name = a

id属性で特定する

//id属性で特定する
WebElement idElement = uDriver.findElement(By.id("link_id"));
System.out.println("id tag name = "+linkElement.getTagName());

1 2 3





monmosu_kinokoさん

SEなので技術HowToとかNewsとか纏めたいなあって思います(=゚ω゚)

このまとめに参加する