初めまして、開発部の的場と申します。
今年の5月に入社し、E2Eテストの自動化を担当しています。
今回の記事では、SeleniumnのXPathを使って、ページ内の要素を指定する方法をご紹介します。
目次はこちら
XPathとは
XPathとは、XML形式の文書から特定の部分を指定して取得するための簡易言語です。
また、XML用なのにHTMLにも使うことができます。
XPathの基本的な書き方
では早速XPathの書き方について紹介していきます。
(例)
<!DOCTYPE html>
<html>
<head>
<title龍野情報システム/title>
</head>
</html>
上記ような、HTMLの場合
html – head – title
このような階層構造で表すことができます。
XPathで書く場合、下記のようにhtmlタグを/(スラッシュ)で区切り、タグの階層構造で表すことができます。
/html/head/title
パスを省略する場合、下記ように//を使用することで、前の要素を省略することが可能です。
//title
属性を利用してXPathの取得方法
classやidのような要素に関連付けたり、連結したりする属性は「@」で表します。
(例)
<div class="wrapper">
<div id="logo">
//*[@class="wrapper"]
//*[@id="logo"]
このように、特定の属性値を表示したい場合は＠(アットマーク)を使います。
また、＊(アスタリスク)は全要素を意味します。
同じclassやidの中から特定の要素を指定した場合
(例)
<li id="menu-item">理念・ビジョン</li>
<li id="menu-item">沿革</li>
<li id="menu-item">採用情報</li>
<li id="menu-item">お問い合わせ</li>
上記ように、採用情報だけを取得したい場合、テキストに含まれる文字列の検索することができます。
また、contains(text(),検索文字列)を使うと、簡単に文字列を指定できる方法を紹介します。
例えば、下記のように書くと「理念・ビジョン、沿革、採用情報、お問い合わせ」の４つが指定されます。
//*[@id=”menu-item”]
そんなときはこのように書くと、お問い合わせの部分のみ指定することが可能です。
//*[@id=”menu-item”]//*[contains(text(),”お問い合わせ”]
Google ChromeでXPathを取得する
上手くXPathを指定できない場合は、Chromeの検証機能を使って、XPathを取得することが可能です。
Chromeに掲載されている「検証機能」を使用し、青くハイライトされた箇所で右クリックをします。
[メニューのコピー] → [XPathのコピー]
をすることでクリップボードにコピーすることができます。
まとめ
今回の記事では、SeleniumでのXPath検索方法についてご紹介しました。
ご紹介したのは一例ですが、ご参考になれば幸いです。
もう少し細かい指定方法につきましては、次回にまとめたいと思います。
Japanese 
English