はじめに

今回は、Seleniumのテスト自動化スクリプトを作成する際に、
操作したいWeb画面の要素の取得する方法をご紹介します。

画面設計書などで画面要素のHTML情報「Id」や「Name」属性が把握できている場合は、それをそのまま使用してください。

それらが分からない場合は以下の手順で「XPath」を取得することをお勧めします。主要なWebブラウザごとの取得方法については、以下の通りとなります。

FireFoxで要素を取得

※サンプル「Selenium公式ホームページ」
https://www.selenium.dev/

①要素を取得したい項目（上記「Doucumentation」メニュー）で右クリック

②「要素を調査」メニューを選択

③開発ツールウィンドウが表示される。この左下がHTML情報の欄で、右クリックした要素の情報が選択されているので、ここで右クリックして、「コピー」メニューにマウスカーソルを合わせる

④表示された「XPath」メニューを選択

これでXPath情報が取得できます。今回、サンプルから取得したXPathは以下の通りです。

「/html/body/header/nav/a[3]」

※Firefoxの場合、XPathを取得した場合、フルパスのみで取得します。

Chromeで要素を取得

①要素を取得したい項目（上記「Doucumentation」メニュー）で右クリック

②「検証」メニューを選択

③開発ツールウィンドウが表示される。この右上がHTML情報の欄で、右クリックした要素の情報が選択されているので、ここで右クリックして
「Copy」メニューにカーソルを合わせる

④表示された「Copy XPath」メニューを選択

これでXPath情報が取得できます。今回、サンプルから取得したXPathは以下の通りです。

「//*[@id=”navbar”]/a[3]」

※Chromeの場合、省略したXPathを取得できます。
Firefox同様、フルパスを取得したい場合は④で「Copy full XPath」メニューを選択してください。

Edgeで要素を取得

※最新のMicrosoft Edgeの場合、Chromeと同じ「Chromium」ベースの技術で
再構築されているため、メニューの名称に違いはあるものの、取得方法はChromeと同じ手順と考えてください。

最後に

今回は主要なブラウザでの要素の取得方法をご紹介しました。
手順については、ブラウザごとの違いはほとんどありませんでした。

次回の記事では、取得した要素の説明およびそれらを編集する方法についてご紹介します。

Tweet

Check