SeleniumによるHTML要素の指定

Webページのテキストボックスやボタンなどの要素を操作する為に、要素のオブジェクトを特定する必要があります。
id属性やname属性等の情報を使って要素を特定する方法について説明します。

目次

要素の特定に使用するメソッド

Seleniumで要素を特定するにはFindElementとFindElementsを使用します。
これらメソッドの引数としてBy.xxxを検索条件として指定します。
もし指定した検索条件で要素が見つからない場合は、OpenQA.Selenium.NoSuchElementExceptionが発生します。

FindElementは、指定した条件に最初に見つかった要素を１つ取得します。

						//C#
						var element = driver.FindElement(By.CssSelector("#animal .tiger"));

FindElementsは、指定した条件に一致するすべての要素を取得します。
見つかった場合は要素のコレクションが返却され、見つからない場合は空のコレクションが返却されます。

						//C#
						IReadOnlyList<IWebElement> elements = driver.FindElements(By.TagName("li"));

						//コレクションの中から要素を特定する場合
						foreach(IWebElement e in elements) {
							Console.WriteLine(e.Text);
						}

要素の下に属する要素を取得できます。

						//C#
						IWebElement element = driver.FindElement(By.TagName("div"));

						IList<IWebElement> elements = element.FindElements(By.TagName("li"));
						foreach(IWebElement e in elements) {
							Console.WriteLine(e.Text);
						}

参考

Web要素の検索

id属性を指定して要素にアクセス

id属性を指定して要素のオブジェクトを取得する方法です。

実装方法

By.Id()メソッドに取得したい要素のid属性名を指定します。

//C#書式
var element = _browser.FindElement(By.Id("id名"));
IList<IWebElement> elements = _browser.FindElements(By.Id("id名"));

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						Private Sub btnId_Click(sender As Object, e As EventArgs) Handles btnId.Click
					
							'idを指定して要素を取得。文字を入力。
							Dim element = _browser.FindElement(By.Id("inputid2"))
							element.SendKeys("テキスト２ all id")
					
						End Sub
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						private void btnId_Click(object sender, EventArgs e)
						{
							//idを指定して要素を取得。文字を入力。
							var element = _browser.FindElement(By.Id("inputid2"));
							element.SendKeys("テキスト２ all id");
						}

name属性を指定して要素にアクセス

name属性を指定して要素のオブジェクトを取得する方法です。

実装方法

By.Name()メソッドに取得したい要素のid属性名を指定します。

//C#書式
var element = _browser.FindElement(By.Name("name名"));
IList<IWebElement> elements = _browser.FindElements(By.Name("name名"));

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						Private Sub btnName_Click(sender As Object, e As EventArgs) Handles btnName.Click
					
							'nameを指定して要素を取得。文字を入力。
							Dim elements = _browser.FindElements(By.Name("inputname"))
							elements(0).SendKeys("テキスト１ all name 0")
					
						End Sub
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						private void btnName_Click(object sender, EventArgs e)
						{
							//nameを指定して要素を取得。文字を入力。
							var elements = _browser.FindElements(By.Name("inputname"));
							elements[0].SendKeys("テキスト１ all name 0");
						}

class属性を指定して要素にアクセス

class属性を指定して要素のオブジェクトを取得する方法です。

実装方法

By.ClassName()メソッドに取得したい要素のclass名を指定します。

//C#書式
var element = _browser.FindElement(By.ClassName("class名"));
IList<IWebElement> elements = _browser.FindElements(By.ClassName("class名"));

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						Private Sub btnClass_Click(sender As Object, e As EventArgs) Handles btnClass.Click
					
							'classを指定して要素を取得。文字を入力。
							Dim elements = _browser.FindElements(By.ClassName("inputclass"))
							elements(0).SendKeys("テキスト１ class 0")
					
						End Sub
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						private void btnClass_Click(object sender, EventArgs e)
						{
							//classを指定して要素を取得。文字を入力。
							var elements = _browser.FindElements(By.ClassName("inputclass"));
							elements[0].SendKeys("テキスト１ class 0");
						}

タグ名を指定して要素にアクセス

タグ名を指定して要素のオブジェクトを取得する方法です。

実装方法

By.TagName()メソッドに取得したい要素のclass名を指定します。

//C#書式
var element = _browser.FindElement(By.TagName("タグ名"));
IList<IWebElement> elements = _browser.FindElements(By.TagName("タグ名"));

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						Private Sub btnTag_Click(sender As Object, e As EventArgs) Handles btnTag.Click
					
							'tagを指定して要素を取得。文字を入力。
							Dim elements = _browser.FindElements(By.TagName("input"))
							elements(0).SendKeys("テキスト１ tag 0")
					
						End Sub
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						private void btnTag_Click(object sender, EventArgs e)
						{
							//tagを指定して要素を取得。文字を入力。
							var elements = _browser.FindElements(By.TagName("input"));
							elements[0].SendKeys("テキスト１ tag 0");
						}

アンカー要素にアクセス

リンクのテキスト名を指定して要素のオブジェクトを取得する方法です。

実装方法

By.LinkText()メソッドに取得したいリンクのテキストを指定します。

//C#書式
var element = _browser.FindElement(By.LinkText("リンクのテキスト"));
IList<IWebElement> elements = _browser.FindElements(By.LinkText("リンクのテキスト"));

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						Private Sub btnLink_Click(sender As Object, e As EventArgs) Handles btnLink.Click
					
							'リンクのテキストを指定して要素を取得。クリック。
							Dim element = _browser.FindElement(By.LinkText("リンク１"))
							element.Click()
					
						End Sub

						Private Sub btnLink2_Click(sender As Object, e As EventArgs) Handles btnLink2.Click
					
							'リンクのテキスト（部分一致）を指定して要素を取得。クリック。
							Dim elements = _browser.FindElements(By.PartialLinkText("リンク"))
							elements(1).Click()
					
						End Sub
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						private void btnLink_Click(object sender, EventArgs e)
						{
							//リンクのテキストを指定して要素を取得。クリック。
							var element = _browser.FindElement(By.LinkText("リンク１"));
							element.Click();
						}
				
						private void btnLink2_Click(object sender, EventArgs e)
						{
							//リンクのテキスト（部分一致）を指定して要素を取得。クリック。
							var elements = _browser.FindElements(By.PartialLinkText("リンク"));
							elements[1].Click();
						}

CSSセレクタによる要素へのアクセス

CSSセレクタを指定することでマッチした要素のオブジェクトを取得する方法です。

実装方法

By.CssSelector()メソッドに取得したい要素のCSSセレクタを指定します。

//C#書式
var element = _browser.FindElement(By.CssSelector("CSSセレクタ"));
IList<IWebElement> elements = _browser.FindElements(By.CssSelector("CSSセレクタ"));

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						Private Sub btnCss_Click(sender As Object, e As EventArgs) Handles btnCss.Click
					
							'cssを指定して要素を取得。文字を入力。
							_browser.FindElement(By.CssSelector("#inputid2")).SendKeys("bbbb")  'id指定
							_browser.FindElements(By.CssSelector(".inputclass"))(0).SendKeys("aaaa")    'class指定
							_browser.FindElements(By.CssSelector("input[type=""text""]"))(2).SendKeys("cccc")   'type指定
							_browser.FindElements(By.CssSelector(".inputclass"))(4).Click() 'class指定
					
						End Sub
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						private void btnCss_Click(object sender, EventArgs e)
						{
							//cssを指定して要素を取得。文字を入力。
							_browser.FindElement(By.CssSelector("#inputid2")).SendKeys("bbbb"); //id指定
							_browser.FindElements(By.CssSelector(".inputclass"))[0].SendKeys("aaaa");   //class指定
							_browser.FindElements(By.CssSelector("input[type=\"text\"]"))[2].SendKeys("cccc");    //type指定
							_browser.FindElements(By.CssSelector(".inputclass"))[4].Click();   //class指定
						}

XPathで要素にアクセス

XPathを指定して要素のオブジェクトを取得する方法です。
※要素のXPathを調べる簡単な方法
　Chromeの開発者ツールで要素を右クリックし、「Copy」->「Copy XPath」で、要素までのXPath文字を取得できます。

実装方法

By.XPath()メソッドに取得したい要素までのXPathを指定します。

//C#書式
var element = _browser.FindElement(By.XPath("XPath"));
IList<IWebElement> elements = _browser.FindElements(By.XPath("XPath"));

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						Private Sub btnXpath_Click(sender As Object, e As EventArgs) Handles btnXpath.Click
					
							'XPathを指定して要素を取得。文字を入力。
							_browser.FindElement(By.XPath("//*[@id=""inputid1""]")).SendKeys("テキスト１ xpath 0")
							_browser.FindElement(By.XPath("//*[@id=""contents""]/div[2]/form/table/tbody/tr[2]/td/input")).SendKeys("テキスト２ xpath 0")
					
						End Sub
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						private void btnXpath_Click(object sender, EventArgs e)
						{
							//XPathを指定して要素を取得。文字を入力。
							_browser.FindElement(By.XPath("//*[@id=\"inputid1\"]")).SendKeys("テキスト１ xpath 0");
							_browser.FindElement(By.XPath("//*[@id=\"contents\"]/div[2]/form/table/tbody/tr[2]/td/input")).SendKeys("テキスト２ xpath 0");
						}

form内の要素にアクセス

form内の要素を取得する方法です。
submitの実行が行えます。

実装方法

まずform要素を取得します。
取得したform要素に対して、さらにform内の要素を取得します。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						Private Sub btnForm_Click(sender As Object, e As EventArgs) Handles btnForm.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 btnForm_Click(object sender, EventArgs e)
						{
							var formElement = _browser.FindElement(By.Name("testform1"));
							formElement.FindElement(By.Id("inputid2")).SendKeys("テキスト２ id");
							formElement.Submit();
						}

iframe内の要素にアクセス

iframe内の要素にアクセスする方法です。
seleniumでiframeにアクセス

実装方法

他の要素取得と同じ方法でiframeのオブジェクトを取得してから、
driverの操作対象をSwitchToメソッドによりiframeのオブジェクトに切り替えます。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						Private Sub btnIframe_Click(sender As Object, e As EventArgs) Handles btnIframe.Click
					
							'iframeの要素を特定
							Dim iframe As IWebElement = _browser.FindElement(By.CssSelector("#inline_frame"))
					
							'制御対象をiframeに切り替え
							_browser.SwitchTo().Frame(iframe)
					
							'iframe内の要素を操作
							_browser.FindElement(By.CssSelector("#inputid2")).SendKeys("bbbb")  'id指定
					
						End Sub
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						private void btnIframe_Click(object sender, EventArgs e)
						{
							//iframeの要素を特定
							IWebElement iframe = _browser.FindElement(By.CssSelector("#inline_frame"));
				
							//制御対象をiframeに切り替え
							_browser.SwitchTo().Frame(iframe);
				
							//iframe内の要素を操作
							_browser.FindElement(By.CssSelector("#inputid2")).SendKeys("bbbb");  //id指定
						}

iframeへの切り替えをnameやidやインデックスで行う

上記のようにFindElementでiframeの要素を取得しなくても、直接nameやidを指定して切り替えることもできます。
インデックスでも指定できます。
SwitchTo().Frame()メソッドで切り替える際に、引数としてnameやidを指定します。
name指定で複数の候補が見つかった場合は先頭のものを使用します。

					//C#
					//id指定
					_browser.SwitchTo().Frame("frameid");

					//name指定
					_browser.SwitchTo().Frame("framename");

					//インデックス指定
					_browser.SwitchTo().Frame(1);

iframeのアクセスを終了する

iframeのアクセスを終了して、デフォルトに戻します。
SwitchTo().DefaultContent()メソッドを使います。

					//C#
					_browser.SwitchTo().DefaultContent();

参考

iFrame と Frame の操作

shadow-root内の要素にアクセス

shadow-root(open)内の要素にアクセスする方法です。
seleniumでshadow-rootにアクセス

実装方法

まず、他の要素取得と同じ方法でshadow-rootの親となる要素を取得します。
その要素に対してGetShadowRootメソッドを実行することで、shadow-rootの要素が取得できます。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						Private Sub btnShadow_Click(sender As Object, e As EventArgs) Handles btnShadow.Click
					
							'shadow-rootの特定
							Dim shadowroot = _browser.FindElement(By.CssSelector("#sr")).GetShadowRoot
					
							'shadow-root内の要素を操作
							shadowroot.FindElement(By.CssSelector("#inputid1")).SendKeys("aaa")  'id指定
					
						End Sub
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						private void btnShadowRoot_Click(object sender, EventArgs e)
						{
							//shadow-rootの特定
							var shadowroot = _browser.FindElement(By.CssSelector("#sr")).GetShadowRoot();
				
							//shadow-root内の要素を操作
							shadowroot.FindElement(By.CssSelector("#inputid1")).SendKeys("aaa");  //id指定
						}