Seleniumを使ったHTML要素の操作
テキストボックスに文字を入力したりボタンをクリックするなど、HTML要素を操作する方法について説明します。
HTML要素を指定する方法については要素の指定を参照してください。
目次
クリック
ボタン／ラジオボタン／チェックボックス／リンク等をクリックする方法です。
実装方法
特定した要素に対してClickメソッドを実行します。
サンプル
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
Private Sub btnClick_Click(sender As Object, e As EventArgs) Handles btnClick.Click
'ボタンをクリック
_browser.FindElement(By.Id("buttonid1")).Click()
MsgBox("上記のクリックでブラウザにalertが表示されるので閉じてからOKを押す")
'ラジオボタンの２つ目をクリック
_browser.FindElements(By.Name("inputname"))(1).Click()
'チェックボックスをクリック
Dim element = _browser.FindElements(By.Name("checkname"))(0)
If element.Selected = False Then
element.Click()
End If
'リンクをクリック
_browser.FindElement(By.LinkText("リンク１")).Click()
MsgBox("上記のクリックでブラウザにalertが表示されるので閉じてからOKを押す")
End Sub
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
private void btnClick_Click(object sender, EventArgs e)
{
//ボタンをクリック
_browser.FindElement(By.Id("buttonid1")).Click();
MessageBox.Show("上記のクリックでブラウザにalertが表示されるので閉じてからOKを押す");
//ラジオボタンの２つ目をクリック
_browser.FindElements(By.Name("inputname"))[1].Click();
//チェックボックスをクリック
var element = _browser.FindElements(By.Name("checkname"))[0];
if (element.Selected == false) {
element.Click();
}
//リンクをクリック
_browser.FindElement(By.LinkText("リンク１")).Click();
MessageBox.Show("上記のクリックでブラウザにalertが表示されるので閉じてからOKを押す");
}
選択
ラジオボタン／セレクトボックスを選択する方法です。
実装方法
ラジオボタン（radio）の場合は、要素を特定してからClickメソッドを実行します。
セレクトボックス（select）は少し手順が必要です。
NuGetから「Selenium.Support」をインストールしてください。
Selenium.Support.UI.SelectElementクラスを使ってselect要素の操作を行います。
サンプル
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
Private Sub btnCheck_Click(sender As Object, e As EventArgs) Handles btnCheck.Click
'ラジオボタンの２つ目を選択
_browser.FindElements(By.Name("radioname"))(1).Click()
End Sub
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
Private Sub btnSelectCheck_Click(sender As Object, e As EventArgs) Handles btnSelectCheck.Click
'select要素のオブジェクトを取得する
Dim selectElement = _browser.FindElement(By.Name("selectname"))
Dim selectObject = New SelectElement(selectElement)
'３番目のoption要素を選択する
selectObject.SelectByIndex(2)
MsgBox("上記によりオプションが選択された")
'option要素のvalue属性の値を指定して選択する
selectObject.SelectByValue("value1")
MsgBox("上記によりオプションが選択された")
'option要素のテキスト値を指定して選択する
selectObject.SelectByText("value2")
MsgBox("上記によりオプションが選択された")
'選択されているoption要素のオブジェクトをリストで取得する
Dim allSelectedOptions = selectObject.AllSelectedOptions
'選択されているoption要素の中で、最初のもの、またはデフォルト値になっているオブジェクトを取得する
Dim firstSelectedOption = allSelectedOptions.FirstOrDefault()
'select要素が含んでいる全てのoption要素をリストで取得する
Dim allAvailableOptions As IList(Of IWebElement) = selectObject.Options
'指定したインデックスのoption要素を選択解除する
selectObject.DeselectByIndex(1)
'option要素のvalue属性の値を指定して選択解除する
selectObject.DeselectByValue("value1")
'option要素のテキスト値を指定して選択解除する
selectObject.DeselectByText("value1")
'全てのoption要素を選択解除する
selectObject.DeselectAll()
'select要素が、複数選択可能となっているかをboolで取得する
MsgBox(selectObject.IsMultiple)
End Sub
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
private void btnSelect_Click(object sender, EventArgs e)
{
//ラジオボタンの２つ目を選択
_browser.FindElements(By.Name("radioname"))[1].Click();
}
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
private void btnSelect2_Click(object sender, EventArgs e)
{
//select要素のオブジェクトを取得する
var selectElement = _browser.FindElement(By.Name("selectname"));
var selectObject = new SelectElement(selectElement);
//３番目のoption要素を選択する
selectObject.SelectByIndex(2);
MessageBox.Show("３番目のoptionが選択された");
//option要素のvalue属性の値を指定して選択する
selectObject.SelectByValue("value1");
MessageBox.Show("１番目のoptionが選択された");
//option要素のテキスト値を指定して選択する
selectObject.SelectByText("value2");
MessageBox.Show("２番目のoptionが選択された");
//select要素(複数選択可)のオブジェクトを取得する----
selectObject = new SelectElement(_browser.FindElements(By.Name("selectname"))[1]);
//選択されているoption要素のオブジェクトをリストで取得する
var allSelectedOptions = selectObject.AllSelectedOptions;
//選択されているoption要素の中で、最初のもの、またはデフォルト値になっているオブジェクトを取得する
var firstSelectedOption = allSelectedOptions.FirstOrDefault();
//select要素が含んでいる全てのoption要素をリストで取得する
IList allAvailableOptions = selectObject.Options;
//指定したインデックスのoption要素を選択解除する
selectObject.DeselectByIndex(1);
//option要素のvalue属性の値を指定して選択解除する
selectObject.DeselectByValue("value_m1");
//option要素のテキスト値を指定して選択解除する
selectObject.DeselectByText("値_m1");
//全てのoption要素を選択解除する
selectObject.DeselectAll();
//select要素が、複数選択可能となっているかをboolで取得する
MessageBox.Show(selectObject.IsMultiple.ToString());
}
参考
入力
テキストボックスやパスワード欄に文字を入力する方法です。
実装方法
特定した要素に対してSendKeysメソッドで文字を設定します。
消す場合はClearメソッドを実行します。
サンプル
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
Private Sub btnSetText_Click(sender As Object, e As EventArgs) Handles btnSetText.Click
'テキストボックスに文字を入力
_browser.FindElement(By.Id("inputid2")).SendKeys("テキスト２")
'パスワードに文字を入力
_browser.FindElements(By.Name("passwordname"))(0).SendKeys("password")
End Sub
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
private void btnInput_Click(object sender, EventArgs e)
{
//テキストボックスに文字を入力
_browser.FindElement(By.Id("inputid2")).SendKeys("テキスト２");
//パスワードに文字を入力
_browser.FindElements(By.Name("passwordname"))[0].SendKeys("password");
}
値の参照
テキストボックスに入力されている値やチェックボックスの選択状態などの、HTML要素に設定されている値を参照する方法です。
実装方法
テキストボックスの場合はGetAttributeメソッドでvalue属性の値を取得します。
ラジオボタンやチェックボックスは、要素のSelectedプロパティでtrue/falseが取得できます。
セレクトボックスはoption要素の選択状態をSelectedプロパティで取得できます。
サンプル
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
Private Sub btnRef_Click(sender As Object, e As EventArgs) Handles btnRef.Click
'テキストボックスを参照
MsgBox(_browser.FindElement(By.Id("inputid2")).GetAttribute("value"))
'ラジオボタンを参照
MsgBox(_browser.FindElements(By.Name("radioname"))(1).Selected)
'チェックボックスを参照
MsgBox(_browser.FindElements(By.Name("checkname"))(0).Selected)
'セレクトボックスを参照
Dim selectElement = _browser.FindElement(By.Name("selectname"))
Dim selectObject = New SelectElement(selectElement)
'３つめのoptionの選択状態を取得
MsgBox(selectObject.Options(2).Selected)
'選択状態となっている全てのoptionを取得
For Each tmp In selectObject.AllSelectedOptions
MsgBox(tmp.GetAttribute("value"))
Next
End Sub
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
private void btnRef_Click(object sender, EventArgs e)
{
//テキストボックスを参照
MessageBox.Show(_browser.FindElement(By.Id("inputid2")).GetAttribute("value"));
//ラジオボタンを参照
MessageBox.Show(_browser.FindElements(By.Name("radioname"))[1].Selected.ToString());
//チェックボックスを参照
MessageBox.Show(_browser.FindElements(By.Name("checkname"))[0].Selected.ToString());
//セレクトボックスを参照
var selectElement = _browser.FindElement(By.Name("selectname"));
var selectObject = new SelectElement(selectElement);
//３つめのoptionの選択状態を取得
MessageBox.Show(selectObject.Options[2].Selected.ToString());
//選択状態となっている全てのoptionを取得
foreach (var tmp in selectObject.AllSelectedOptions)
{
MessageBox.Show(tmp.GetAttribute("value"));
}
}
Submit
formに対してsubmitを行う方法です。
実装方法
フォームの要素を特定して、Submitメソッドを実行します。
サンプル
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
Private Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click
Dim formElement = _browser.FindElement(By.Name("testform1"))
formElement.FindElement(By.Id("inputid2")).SendKeys("テキスト２ id")
formElement.Submit()
End Sub
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
private void btnSubmit_Click(object sender, EventArgs e)
{
var formElement = _browser.FindElement(By.Name("testform1"));
formElement.FindElement(By.Id("inputid2")).SendKeys("テキスト２ id");
formElement.Submit();
}
属性の参照・設定
要素の属性の値を参照・設定する方法です。
実装方法
属性の値を取得するにはGetAttributeメソッドを使用します。
引数に属性名を指定すれば、属性の値が返却されます。
属性の値を設定するメソッドはありませんので、代わりにJavaScriptのコードを実行する処理を使って、JavaScriptで設定を行います。
サンプル
Private Sub btnAttr_Click(sender As Object, e As EventArgs) Handles btnAttr.Click
'info属性の値を表示
MsgBox(_browser.FindElement(By.Id("styleid1")).GetAttribute("info"))
'文字のスタイル内容を表示
CType(_browser, IJavaScriptExecutor).ExecuteScript("document.getElementById('styleid1').setAttribute('info', 'newinfo');")
CType(_browser, IJavaScriptExecutor).ExecuteScript("alert(document.getElementById('styleid1').getAttribute('info'));")
End Sub
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
private void btnAttr_Click(object sender, EventArgs e)
{
//info属性の値を表示
MessageBox.Show(_browser.FindElement(By.Id("styleid1")).GetAttribute("info"));
//文字のスタイル内容を表示
((IJavaScriptExecutor)_browser).ExecuteScript("document.getElementById('styleid1').setAttribute('info', 'newinfo');");
((IJavaScriptExecutor)_browser).ExecuteScript("alert(document.getElementById('styleid1').getAttribute('info'));");
}
スタイルの参照・設定
指定した要素のスタイルを設定・参照する方法です。
実装方法
スタイルの参照・設定はJavaScriptを使います。
サンプル
'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
Private Sub btnStyle_Click(sender As Object, e As EventArgs) Handles btnStyle.Click
'ExecuteAsyncScriptで非同期に実行する場合、JavaScriptに'alert'が含まれていると、処理が止まる
'alertを閉じないまま、次のalertを表示すると、例外が発生する。
'背景色を変更
CType(_browser, IJavaScriptExecutor).ExecuteScript("document.body.style.backgroundColor = 'Red';")
'文字のスタイル内容を表示
CType(_browser, IJavaScriptExecutor).ExecuteScript("alert(document.getElementById('styleid1').style.cssText);")
MsgBox("ブラウザに表示されているalertを閉じてからOKを押す")
CType(_browser, IJavaScriptExecutor).ExecuteScript("alert(document.getElementById('styleid1').getAttribute('style'));")
MsgBox("ブラウザに表示されているalertを閉じてからOKを押す")
'文字のスタイルを変更
CType(_browser, IJavaScriptExecutor).ExecuteScript("document.getElementById('styleid1').style.cssText ='font-size: xx-large; font-style: italic; color: red;';")
CType(_browser, IJavaScriptExecutor).ExecuteScript("alert(document.getElementById('styleid1').style.cssText);")
MsgBox("ブラウザに表示されているalertを閉じてからOKを押す")
'文字のスタイルを変更２
CType(_browser, IJavaScriptExecutor).ExecuteScript("document.getElementById('styleid1').setAttribute('style', 'font-size: large; font-style: italic; color: green;');")
CType(_browser, IJavaScriptExecutor).ExecuteScript("alert(document.getElementById('styleid1').style.cssText);")
MsgBox("ブラウザに表示されているalertを閉じてからOKを押す")
'文字のスタイルを変更３
CType(_browser, IJavaScriptExecutor).ExecuteScript("document.getElementById('styleid1').style.color ='black';")
CType(_browser, IJavaScriptExecutor).ExecuteScript("alert(document.getElementById('styleid1').style.color);")
MsgBox("ブラウザに表示されているalertを閉じてからOKを押す")
End Sub
//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
private void btnStyle_Click(object sender, EventArgs e)
{
//背景色を変更
((IJavaScriptExecutor)_browser).ExecuteScript("document.body.style.backgroundColor = 'Red';");
//文字のスタイル内容を表示
((IJavaScriptExecutor)_browser).ExecuteScript("alert(document.getElementById('styleid1').style.cssText);");
MessageBox.Show("ブラウザに表示されているalertを閉じてからOKを押す");
((IJavaScriptExecutor)_browser).ExecuteScript("alert(document.getElementById('styleid1').getAttribute('style'));");
MessageBox.Show("ブラウザに表示されているalertを閉じてからOKを押す");
//文字のスタイルを変更
((IJavaScriptExecutor)_browser).ExecuteScript("document.getElementById('styleid1').style.cssText ='font-size: xx-large; font-style: italic; color: red;';");
((IJavaScriptExecutor)_browser).ExecuteScript("alert(document.getElementById('styleid1').style.cssText);");
MessageBox.Show("ブラウザに表示されているalertを閉じてからOKを押す");
//文字のスタイルを変更２
((IJavaScriptExecutor)_browser).ExecuteScript("document.getElementById('styleid1').setAttribute('style', 'font-size: large; font-style: italic; color: green;');");
((IJavaScriptExecutor)_browser).ExecuteScript("alert(document.getElementById('styleid1').style.cssText);");
MessageBox.Show("ブラウザに表示されているalertを閉じてからOKを押す");
//文字のスタイルを変更３
((IJavaScriptExecutor)_browser).ExecuteScript("document.getElementById('styleid1').style.color ='black';");
((IJavaScriptExecutor)_browser).ExecuteScript("alert(document.getElementById('styleid1').style.color);");
MessageBox.Show("ブラウザに表示されているalertを閉じてからOKを押す");
}