UnsplashのBob Canningが撮影した写真

はじめに

この記事にはSeleniumの基本的なコードとして、ドライバーの生成、HTML要素の取得と操作についてまとめています。

動作確認した環境

OS：Windows11 Home

ドライバーの生成

■Chromeの場合

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;

IWebDriver driver = new ChromeDriver();

■Edgeの場合

using OpenQA.Selenium;
using OpenQA.Selenium.Edge;

IWebDriver driver = new EdgeDriver();

画面遷移

driver.Navigate().GoToUrl("遷移先URL");

例）

driver.Navigate().GoToUrl("https://dev-admin-pm.armada.graphe.ne.jp/login");

HTML要素の取得

要素の取得には以下のメソッドを使います。

FindElement()：指定した条件に当てはまる最初の要素１つを取得

FindElements()：指定した条件に当てはまる要素全てを取得

　

これらは、以下の通り書き方はほとんど同じです。

driver.FindElement(By.ClassName("btn"));    //クラスにbtnを持つ最初の要素を取得
driver.FindElements(By.ClassName("btn"));   //クラスにbtnを持つ要素全てを取得

　

以下では、FindElement()を使った要素取得のやり方をまとめています。

idで取得

driver.FindElement(By.Id("id名"));

例）

driver.FindElement(By.Id(”target”))

  ⇒取得できるHTML要素の例：<div id=”target”></div>

classで取得

driver.FindElement(By.ClassName("クラス名"));

例）

driver.FindElement(By.ClassName("information"));

  ⇒取得できるHTML要素の例：<div class="information”></div>

cssセレクタで取得

driver.FindElement(By.CssSelector("cssセレクタ"));

例）

driver.FindElement(By.CssSelector("#target"));

  ⇒取得できるHTML要素の例：<div id="target"></div>

name属性で取得

driver.FindElement(By.Name("name属性の値"));

例）

driver.FindElement(By.Name("login_id"))　

  ⇒取得できるHTML要素の例：<input type="text" name="login_id" value="">

タグ名で取得

driver.FindElement(By.TagName("タグ名"));

例）

driver.FIndElement(By.TagName("a"));

 　⇒取得できるHTML要素の例：<a href =”example.com/top">TOPへ</a>

XPathで取得

driver.FindElement(By.XPath("任意のXpath")

例）

driver.FindElement(By.XPath("//button[@type='submit']")).Click();

  ⇒取得できるHTML要素の例：<button type="submit"> ログイン </button>

　

Selenium公式の要素の取得に関するページは以下です。

　https://www.selenium.dev/ja/documentation/webdriver/elements/locators/

補足１：取得した要素にさらにFindElement()を使う

取得した要素からさらにFindElement()を使ってその配下の要素を取得することもできます。

driver.FindElement(By.Id(”parent”)).FindElement(By.TagName(”a”));

 　　⇒取得できるHTML要素の例：<div id=”parent”>
                                 <a href=”#”>リンク</a>
                               </div>

補足２：FindElements()で取得した要素でループ処理

FindElements()で取得した要素はこんな感じでループで値を取得したりできて便利です。

以下では取得した要素のクラスをコンソールに書き出しています。

var elements = driver.FindElements(By.TagName("div"));
foreach(var e in elements){
    Console.WriteLine(e.GetAttribute("class"));
}

要素の操作

要素の操作は以下の４つがあります。

• Click：クリックする
• SendKeys：テキストを入力する
• clear：入力内容をクリアする
• select：リストから選択する

※submitは非推奨なので、省いています。

Click()：クリックする

要素をクリックする場合は、Click()メソッドを使用します。

要素.Click()

例）driver.FindElement(By.Name("login_button")).Click();

SendKeys()：テキストを入力する

要素にテキストを入力する場合は、SendKeys()メソッドを使用します。

要素.SendKeys(入力内容);

例）driver.FindElement([By.Name](http://by.name/)("username")).SendKeys("JohnDoe");

clear()：入力内容をクリアする

入力欄の入力内容を削除するにはClear()メソッドを使います。

要素.Clear();

例）
driver.FindElement([By.Name](http://by.name/)("username")).Clear();

リストから選択する（<select></select>の操作）

Selectを使うためにはパッケージが必要で、事前準備として以下２点が必要です。

■準備１．パッケージをインストールする

C#プロジェクトのルートで以下コマンドを実行してください。

dotnet add package Selenium.Support

■準備２．パッケージを読み込む

ファイルの冒頭に以下を追記してください。

using OpenQA.Selenium.Support.UI;

　

【使い方】

以下のSelectタグを例として使い方を記載します。

<select name="sample" multiple="multiple">
  <option value="val1">テキスト1</option>
  <option value="val2">テキスト2</option>
  <option value="val3">テキスト3</option>
</select>

■インスタンスを生成する

使用前にインスタンス化する必要があります。

var selectElement = driver.FindElement(By.Name("sample"));
var select = new SelectElement(selectElement)

■選択する方法は３つ

select.SelectByText("テキスト1");   //テキストで選択
select.SelectByValue("val2");       //value属性の値で指定
select.SelectByIndex(2);            //インデックスで指定（0始まり）　例の場合3番目の選択肢が選択される。

■全ての選択肢を取得

IList<IWebElement> optionList = select.Options;

■選択した選択肢を取得

IList<IWebElement> selectedOptionList = select.AllSelectedOptions;

■選択を解除する（複数選択可能なSelectでのみ使用可能）

select.DeselectByValue("val2");

　

Seleniumの基本コードについては以上です。