JavaScript を使用して XPath で要素を取得する
- Selenium とは何ですか
- Selenium-WebDriver とは
- Selenium の XPath とは
- XPath で Selenium WebDriver で JavaScript を使用して要素を取得する
この記事では、Selenium WebDriver で JavaScript を使用して XPath で要素を取得する方法について説明します。
Selenium とは何ですか
Selenium は、Google Chrome、Mozilla Firefox、Safari などの複数のブラウザで Web サイトアプリケーションをテストするために使用される自動テストフレームワークです。
JavaScript、Java、Python、C# などの複数のプログラミング言語で、Selenium でテストスクリプトを作成できます。Selenium が提供するツールを使用している場合は、Selenium テストと呼ばれることがあります。
Selenium は単一のツールではありませんが、次のようなさまざまなタイプのテストに使用できる複数のソフトウェアで構成されています。
- Selenium Grid
- Selenium WebDriver
- Selenium Remote Control (RC)
- Selenium Integrated Development Environment (IDE)
Selenium-WebDriver とは
Selenium-Webdriver は、JavaScript、Java、Python、C# などのさまざまなプログラミング言語を使用して複数のブラウザーでテストスクリプトを実行することにより、テストを実行するために使用されます。
Selenium-Webdriver は、Web アプリケーションが本番環境で正しく動作することを保証するために使用されます。アプリケーションをテストするためのダミー環境を作成できます。
セレン Web ドライバーには 4つの主要部分があります。
- ブラウザ
- ブラウザドライバ
- Selenium クライアントライブラリ
- JSON ワイヤープロトコル
Selenium の XPath とは
XPath は、Web ページの XML および HTML 構造をトラバースするために使用されます。
XPath は、id、class などの CSS セレクターを使用していない場合、Web ページ上の要素を見つけることができます。XPath を使用して、静的要素と動的要素（特定のイベントによって属性が変更される場合があります）を見つけることができます。
Selenium には 2つの XPath があります。
- 絶対パス
- 相対パス
絶対パス
ルートタグである HTML タグから始めて、絶対パスでターゲットにする要素を指定します。次に、子要素をターゲットにして、スラッシュを使用して両方を追加することにより、前に進むことができます。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Absoulte Path</title>
</head>
<body>
<form id="login-form">
<input name="name" type="text" />
<input name="email" type="text" />
<input name="password" type="password" />
<button>Login</button>
</form>
</body>
</html>
上記のソースコードを見てください。最初の input をターゲットにするパスを指定する必要があります。
html/body/form/input[1]
これにより、最初に HTML 要素、body 要素、次に form にアクセスしてから、フォーム内の 3 番目の入力要素に移動します。
相対パス
相対パスは、HTML 要素を直接ターゲットにできるという点で絶対パスとは異なります。したがって、上記のソースコードでは、絶対パスの場合と同様に、2つのスラッシュ（相対パスであることを示す）を記述し、そこからトラバースします。
///form/input[1]
XPath で Selenium WebDriver で JavaScript を使用して要素を取得する
document.evaluate は、XPath 式を渡すことで XPath の結果を取得できます。
let HeadingElements = document.evaluate(
'/html/body//p', document, null, XPathResult.ANY_TYPE, null);
let NextHeading = HeadingElements.iterateNext();
let HeadingTexts = '';
while (NextHeading) {
HeadingTexts += NextHeading.textContent + '\n';
NextHeading = NextHeading.iterateNext();
}
console.log(HeadingTexts);
上記のソースコードは、すべてのターゲット段落要素をターゲットにします（XPath が提供されているため）。すべての段落のテキストコンテンツを取り出し、それを変数に追加して、結果をログアウトします。