ロケータ戦略
ロケータは、ページ上の要素を識別する方法です。これは、「要素の検索」メソッドに渡される引数です。
ロケータに関するヒント、いつどのロケータを使用するか、および検索メソッドとは別にロケータを宣言する理由などについては、推奨されるテストプラクティスをご覧ください。
従来のロケータ
Selenium は、WebDriver でこれらの 8 つの従来のロケーション戦略をサポートしています
| ロケータ | 説明 |
|---|---|
| クラス名 | クラス名に検索値を含む要素を検索します（複合クラス名は許可されていません） |
| CSS セレクタ | CSS セレクタに一致する要素を検索します |
| ID | ID 属性が検索値に一致する要素を検索します |
| 名前 | NAME 属性が検索値に一致する要素を検索します |
| リンクテキスト | 表示テキストが検索値に一致するアンカー要素を検索します |
| 部分一致リンクテキスト | 表示テキストに検索値を含むアンカー要素を検索します。複数の要素が一致する場合、最初の要素のみが選択されます。 |
| タグ名 | タグ名が検索値に一致する要素を検索します |
| XPath | XPath 式に一致する要素を検索します |
ロケータの作成
Selenium を使用して Web 要素を操作するには、まず Web ページ上で要素を特定する必要があります。Selenium は、ページ上の要素を特定するために使用できる上記の方法を提供しています。ロケータを理解して作成するために、次の HTML スニペットを使用します。
<html>
<body>
<style>
.information {
background-color: white;
color: black;
padding: 10px;
}
</style>
<h2>Contact Selenium</h2>
<form>
<input type="radio" name="gender" value="m" />Male
<input type="radio" name="gender" value="f" />Female <br>
<br>
<label for="fname">First name:</label><br>
<input class="information" type="text" id="fname" name="fname" value="Jane"><br><br>
<label for="lname">Last name:</label><br>
<input class="information" type="text" id="lname" name="lname" value="Doe"><br><br>
<label for="newsletter">Newsletter:</label>
<input type="checkbox" name="newsletter" value="1" /><br><br>
<input type="submit" value="Submit">
</form>
<p>To know more about Selenium, visit the official page
<a href ="www.selenium.dev">Selenium Official Page</a>
</p>
</body>
</html>
クラス名
HTML ページの Web 要素は class 属性を持つことができます。上記の HTML スニペットに例があります。Selenium で利用可能なクラス名ロケータを使用して、これらの要素を識別できます。
WebDriver driver = new ChromeDriver();
driver.findElement(By.className("information"));
driver = webdriver.Chrome()
driver.get("https://selenium.dokyumento.jp/selenium/web/locators_tests/locators.html")
element = driver.find_element(By.CLASS_NAME, "information") var driver = new ChromeDriver();
driver.FindElement(By.ClassName("information"));
driver.find_element(class: 'information') let driver = await new Builder().forBrowser('chrome').build();
const loc = await driver.findElement(By.className('information'));
val driver = ChromeDriver()
val loc: WebElement = driver.findElement(By.className("information"))
CSS セレクタ
CSS は HTML ページをスタイル設定するために使用される言語です。css セレクタロケータ戦略を使用して、ページ上の要素を識別できます。要素に id がある場合、ロケータを css = #id として作成します。それ以外の場合、従う形式は css = [attribute = value] です。上記の HTML スニペットの例を見てみましょう。CSS を使用して、名テキストボックスのロケータを作成します。
WebDriver driver = new ChromeDriver();
driver.findElement(By.cssSelector("#fname"));
driver = webdriver.Chrome()
driver.get("https://selenium.dokyumento.jp/selenium/web/locators_tests/locators.html")
element = driver.find_element(By.CSS_SELECTOR, "#fname") var driver = new ChromeDriver();
driver.FindElement(By.CssSelector("#fname"));
driver.find_element(css: '#fname') let driver = await new Builder().forBrowser('chrome').build();
const loc = await driver.findElement(By.css('#fname'));
val driver = ChromeDriver()
val loc: WebElement = driver.findElement(By.css("#fname"))
ID
Web ページ内の要素の ID 属性を使用して要素を特定できます。一般的に、ID プロパティは Web ページ上の各要素に対して一意である必要があります。それを使用して、姓フィールドを識別します。
WebDriver driver = new ChromeDriver();
driver.findElement(By.id("lname"));
driver = webdriver.Chrome()
driver.get("https://selenium.dokyumento.jp/selenium/web/locators_tests/locators.html")
element = driver.find_element(By.ID, "lname") var driver = new ChromeDriver();
driver.FindElement(By.Id("lname"));
driver.find_element(id: 'lname') let driver = await new Builder().forBrowser('chrome').build();
const loc = await driver.findElement(By.id('lname'));
val driver = ChromeDriver()
val loc: WebElement = driver.findElement(By.id("lname"))
名前
Web ページ内の要素の NAME 属性を使用して要素を特定できます。一般的に、NAME プロパティは Web ページ上の各要素に対して一意である必要があります。それを使用して、ニュースレターチェックボックスを識別します。
WebDriver driver = new ChromeDriver();
driver.findElement(By.name("newsletter"));
driver = webdriver.Chrome()
driver.get("https://selenium.dokyumento.jp/selenium/web/locators_tests/locators.html")
element = driver.find_element(By.NAME, "newsletter") var driver = new ChromeDriver();
driver.FindElement(By.Name("newsletter"));
driver.find_element(name: 'newsletter') let driver = await new Builder().forBrowser('chrome').build();
const loc = await driver.findElement(By.name('newsletter'));
val driver = ChromeDriver()
val loc: WebElement = driver.findElement(By.name("newsletter"))
リンクテキスト
特定したい要素がリンクの場合、リンクテキストロケータを使用して Web ページ上で要素を識別できます。リンクテキストはリンクの表示テキストです。共有された HTML スニペットには、リンクが利用可能です。それを特定する方法を見てみましょう。
WebDriver driver = new ChromeDriver();
driver.findElement(By.linkText("Selenium Official Page"));
driver = webdriver.Chrome()
driver.get("https://selenium.dokyumento.jp/selenium/web/locators_tests/locators.html")
element = driver.find_element(By.LINK_TEXT, "Selenium Official Page") var driver = new ChromeDriver();
driver.FindElement(By.LinkText("Selenium Official Page"));
driver.find_element(link_text: 'Selenium Official Page') let driver = await new Builder().forBrowser('chrome').build();
const loc = await driver.findElement(By.linkText('Selenium Official Page'));
val driver = ChromeDriver()
val loc: WebElement = driver.findElement(By.linkText("Selenium Official Page"))
部分一致リンクテキスト
特定したい要素がリンクの場合、部分一致リンクテキストロケータを使用して Web ページ上で要素を識別できます。リンクテキストはリンクの表示テキストです。部分テキストを値として渡すことができます。共有された HTML スニペットには、リンクが利用可能です。それを特定する方法を見てみましょう。
WebDriver driver = new ChromeDriver();
driver.findElement(By.partialLinkText("Official Page"));
driver = webdriver.Chrome()
driver.get("https://selenium.dokyumento.jp/selenium/web/locators_tests/locators.html")
element = driver.find_element(By.PARTIAL_LINK_TEXT, "Official Page") var driver = new ChromeDriver();
driver.FindElement(By.PartialLinkText("Official Page"));
driver.find_element(partial_link_text: 'Official Page') let driver = await new Builder().forBrowser('chrome').build();
const loc = await driver.findElement(By.partialLinkText('Official Page'));
val driver = ChromeDriver()
val loc: WebElement = driver.findElement(By.partialLinkText("Official Page"))
タグ名
HTML タグ自体をロケータとして使用して、ページ上の Web 要素を識別できます。上記の共有された HTML スニペットから、HTML タグ「a」を使用してリンクを識別しましょう。
WebDriver driver = new ChromeDriver();
driver.findElement(By.tagName("a"));
driver = webdriver.Chrome()
driver.get("https://selenium.dokyumento.jp/selenium/web/locators_tests/locators.html")
element = driver.find_element(By.TAG_NAME, "a") var driver = new ChromeDriver();
driver.FindElement(By.TagName("a"));
driver.find_element(tag_name: 'a') let driver = await new Builder().forBrowser('chrome').build();
const loc = await driver.findElement(By.tagName('a'));
val driver = ChromeDriver()
val loc: WebElement = driver.findElement(By.tagName("a"))
XPath
HTML ドキュメントは XML ドキュメントと見なすことができ、要素を特定するために目的の要素に到達するためにトラバースされるパスである XPath を使用できます。XPath は、ドキュメントのルートから作成される絶対 XPath である可能性があります。例 - /html/form/input[1]。これは男性ラジオボタンを返します。または、XPath は相対的である可能性があります。例 - //input[@name = 'fname']。これは、名テキストボックスを返します。XPath を使用して女性ラジオボタンのロケータを作成しましょう。
WebDriver driver = new ChromeDriver();
driver.findElement(By.xpath("//input[@value='f']"));
driver = webdriver.Chrome()
driver.get("https://selenium.dokyumento.jp/selenium/web/locators_tests/locators.html")
element = driver.find_element(By.XPATH, "//input[@value='f']") var driver = new ChromeDriver();
driver.FindElement(By.Xpath("//input[@value='f']"));
driver.find_element(xpath: "//input[@value='f']") let driver = await new Builder().forBrowser('chrome').build();
const loc = await driver.findElement(By.xpath('//input[@value='f']'));
import org.openqa.selenium.By
val driver = ChromeDriver()
val loc: WebElement = driver.findElement(By.xpath('//input[@value='f']'))
ロケータの利用
FindElement を使用すると、ロケータの使用が簡単になります。ほとんどの言語では、webdriver.common.by.By を利用するだけで済みますが、他の言語では、FindElement 関数でパラメータを設定するのと同じくらい簡単です
By
import org.openqa.selenium.By;
WebDriver driver = new ChromeDriver();
driver.findElement(By.className("information"));
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.find_element(By.CLASS_NAME, "information")
var driver = new ChromeDriver();
driver.FindElement(By.ClassName("information"));
driver.find_element(class: 'information') let driver = await new Builder().forBrowser('chrome').build();
const loc = await driver.findElement(By.className('information'));
import org.openqa.selenium.By
val driver = ChromeDriver()
val loc: WebElement = driver.findElement(By.className("information"))
ByChained
ByChained クラスを使用すると、2 つの By ロケータをチェーンできます。たとえば、親要素を特定してから、その親の子要素を特定する代わりに、これら 2 つの FindElement() 関数を 1 つに結合できます。
By example = new ByChained(By.id("login-form"), By.id("username-field"));
WebElement username_input = driver.findElement(example);ByAll
ByAll クラスを使用すると、2 つの By ロケータを一度に利用して、By ロケータのいずれかに一致する要素を見つけることができます。たとえば、ユーザー名とパスワードの入力フィールドを別々に見つけるために 2 つの FindElement() 関数を利用する代わりに、それらを 1 つのクリーンな FindElements() で一緒に見つけることができます
By example = new ByAll(By.id("password-field"), By.id("username-field"));
List<WebElement> login_inputs = driver.findElements(example);相対ロケータ
Selenium 4 では、相対ロケータ（以前はフレンドリーロケータと呼ばれていました）が導入されています。これらのロケータは、目的の要素のロケータを構築するのが簡単ではないが、要素が簡単に構築されたロケータを持つ要素との関係で空間的にどこにあるかを説明するのが簡単な場合に役立ちます。
仕組み
Selenium は、JavaScript 関数 getBoundingClientRect() を使用して、ページ上の要素のサイズと位置を決定し、この情報を使用して隣接する要素を特定できます。
相対ロケータメソッドは、起点の引数として、以前に特定された要素参照、または別のロケータを取ることができます。これらの例では、ロケータのみを使用しますが、最終的なメソッドのロケータを要素オブジェクトと交換しても、同じように機能します。
相対ロケータを理解するために、以下の例を検討してみましょう。
利用可能な相対ロケータ
上
メールテキストフィールド要素が何らかの理由で簡単に識別できないが、パスワードテキストフィールド要素は識別できる場合、パスワード要素の「上」にある「入力」要素であるという事実を使用して、テキストフィールド要素を特定できます。
By emailLocator = RelativeLocator.with(By.tagName("input")).above(By.id("password"));email_locator = locate_with(By.TAG_NAME, "input").above({By.ID: "password"})var emailLocator = RelativeBy.WithLocator(By.TagName("input")).Above(By.Id("password")); driver.find_element({relative: {tag_name: 'input', above: {id: 'password'}}})let emailLocator = locateWith(By.tagName('input')).above(By.id('password'));val emailLocator = RelativeLocator.with(By.tagName("input")).above(By.id("password"))下
パスワードテキストフィールド要素が何らかの理由で簡単に識別できないが、メールテキストフィールド要素は識別できる場合、メール要素の「下」にある「入力」要素であるという事実を使用して、テキストフィールド要素を特定できます。
By passwordLocator = RelativeLocator.with(By.tagName("input")).below(By.id("email"));password_locator = locate_with(By.TAG_NAME, "input").below({By.ID: "email"})var passwordLocator = RelativeBy.WithLocator(By.TagName("input")).Below(By.Id("email")); driver.find_element({relative: {tag_name: 'input', below: {id: 'email'}}})let passwordLocator = locateWith(By.tagName('input')).below(By.id('email'));val passwordLocator = RelativeLocator.with(By.tagName("input")).below(By.id("email"))左
キャンセルボタンが何らかの理由で簡単に識別できないが、送信ボタン要素は識別できる場合、送信要素の「左」にある「ボタン」要素であるという事実を使用して、キャンセルボタン要素を特定できます。
By cancelLocator = RelativeLocator.with(By.tagName("button")).toLeftOf(By.id("submit"));cancel_locator = locate_with(By.TAG_NAME, "button").to_left_of({By.ID: "submit"})var cancelLocator = RelativeBy.WithLocator(By.tagName("button")).LeftOf(By.Id("submit")); driver.find_element({relative: {tag_name: 'button', left: {id: 'submit'}}})let cancelLocator = locateWith(By.tagName('button')).toLeftOf(By.id('submit'));val cancelLocator = RelativeLocator.with(By.tagName("button")).toLeftOf(By.id("submit"))右
送信ボタンが何らかの理由で簡単に識別できないが、キャンセルボタン要素は識別できる場合、キャンセル要素の「右」にある「ボタン」要素であるという事実を使用して、送信ボタン要素を特定できます。
By submitLocator = RelativeLocator.with(By.tagName("button")).toRightOf(By.id("cancel"));submit_locator = locate_with(By.TAG_NAME, "button").to_right_of({By.ID: "cancel"})var submitLocator = RelativeBy.WithLocator(By.tagName("button")).RightOf(By.Id("cancel")); driver.find_element({relative: {tag_name: 'button', right: {id: 'cancel'}}})let submitLocator = locateWith(By.tagName('button')).toRightOf(By.id('cancel'));val submitLocator = RelativeLocator.with(By.tagName("button")).toRightOf(By.id("cancel"))近く
相対的な位置が明確でない場合、またはウィンドウサイズに基づいて変化する場合は、「near」メソッドを使用して、指定されたロケータから最大 50px 離れた要素を識別できます。これの優れたユースケースの 1 つは、簡単に構築されたロケータを持たないが、関連する 入力ラベル要素 は持つフォーム要素を操作することです。
By emailLocator = RelativeLocator.with(By.tagName("input")).near(By.id("lbl-email"));email_locator = locate_with(By.TAG_NAME, "input").near({By.ID: "lbl-email"})var emailLocator = RelativeBy.WithLocator(By.tagName("input")).Near(By.Id("lbl-email")); driver.find_element({relative: {tag_name: 'input', near: {id: 'lbl-email'}}})let emailLocator = locateWith(By.tagName('input')).near(By.id('lbl-email'));val emailLocator = RelativeLocator.with(By.tagName("input")).near(By.id("lbl-email"));相対ロケータのチェーン
必要に応じてロケータをチェーンすることもできます。要素が 1 つの要素の上/下、および別の要素の右/左の両方であるとして最も簡単に識別される場合があります。
By submitLocator = RelativeLocator.with(By.tagName("button")).below(By.id("email")).toRightOf(By.id("cancel"));submit_locator = locate_with(By.TAG_NAME, "button").below({By.ID: "email"}).to_right_of({By.ID: "cancel"})var submitLocator = RelativeBy.WithLocator(By.tagName("button")).Below(By.Id("email")).RightOf(By.Id("cancel")); driver.find_element({relative: {tag_name: 'button', below: {id: 'email'}, right: {id: 'cancel'}}})let submitLocator = locateWith(By.tagName('button')).below(By.id('email')).toRightOf(By.id('cancel'));val submitLocator = RelativeLocator.with(By.tagName("button")).below(By.id("email")).toRightOf(By.id("cancel"))
