XPathとCSSセレクタをChromeで取得する

XPathとCSSセレクタの必要性

Seleniumによるブラウザ自動実行では、id、name、classなどの属性で要素を選択し、操作します。
しかし、属性が不十分な場合、XPathとCSSセレクタを多用することになります。
本記事では、XPathとCSSセレクタをChromeで取得する方法について説明します。

実行環境

Chrome:58.0.3029.110 (64-bit)
FireFox:53.0.3 (64 ビット)
Selenium IDE:2.9.1

Chromeデベロッパーツール起動

F12を押す。
XPathとCSSセレクタをChromeで取得する - XPathとCSSセレクタをChromeで取得する

要素指定

デベロッパーツールの左上の矢印アイコンを押すと要素を指定できる。
要素指定

XPath/Selectorコピー

要素の一覧上で右クリックし、「Copy / Copy XPath」を指定する。
「Copy / Copy Selector」を指定すると、CSSセレクタを取得できる。

XPathコピー

その他のブラウザでの取得例(英語サイト)

http://www.wikihow.com/Find-XPath-Using-Firebug

Selenium IDEでのXPath利用例

Yahooトップを表示して検索ボタンをクリックするよう設定。
IDEでの実行例

実行

Yahooトップが表示される。
Yahooトップ表示

検索ボタンのクリックが実行され、画面が変わる。
検索ボタンクリック後

“XPathとCSSセレクタをChromeで取得する” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。