前書きコーディングの流れブラウザの開発者ツールの使い方メソッドの特徴(cssセレクタとxpath)後書き参考サイトリスト1.前書きこんにちは。2018年入社、エンジニアソリューション事業部のしまふくろうです。現場でSeleniumという、Web画面操作を自動化するためのツールを使って、テストの自動化をしています。画面回りについてあまり知識のない状態から開発が始まり、コーディングで試行錯誤しているうち、「もっと早く知っておきたかった......」と思うことが沢山でてきたので、今回記事にまとめました。(SeleniumについてはS.RさんのSeleniumの記事も参考になるかと思います。)2.コーディングの流れ基本的にSeleniumのコードは、以下の処理の繰り返しになる。→要素に紐づく値を取得する要素に対してGUIの操作を加える要素取得時は、以下のように、でcssセレクタや、xpathを使って場所指定をする。(以下は、cssセレクタを使う場合のpythonのコード例。a[href*=’/m-field’]”がcssセレクタ。htmlの階層構造や、id、クラス名などを元に要素の場所を指定したものである。●cssセレクタの構文(開発時によく使うもの)基本的なセレクタ記法の他、「疑似クラス」で調べるとよりコードが楽に書けるかもしれない。要素指定に必要な情報(cssセレクタやxpath)をメソッドに渡すことで要素の取得ができる。基本的に使い方は同じだが、2は呼び出しに使用したwebElementオブジェクトの、子以下の階層の要素のみ検索する、といった違いがある。...”というメソッドと、cssセレクタ等の情報があれば要素が選べることが分かったと思う。このcssセレクタ、ごちゃごちゃしている。書くにしても、階層やクラス名を調べるのは結構手間だ。間違っていたら要素の取得ができないので、確認作業も気を使う。できることなら楽をしたい。私個人としては、以下のような流れに落ち着いている。以降では、Chromeの開発者ツールの使い方をご紹介する。cssセレクタ自体詳しくない、という方でも、実際に試しながら理解できるのでぜひブラウザを開きながら試していただきたい。今回は主にcssセレクタに絞って話を進めるが、その理由は「余談」の項にて後述する。自動生成のセレクタでは都合が悪い場合がある。」の項を参照3.ブラウザの開発者ツールの使い方Chromeをはじめとする各種ブラウザでは、F12キーを押すと、開発者ツール(デベロッパーツール)が表示される。開発者ツールの表示例。今回は特に、Seleniumの開発で役に立った機能を紹介する。(ブラウザによって機能等違いはあるが今回はChromeの開発者ツールの紹介となる。画面上の要素をクリックすることで、html中の該当箇所を探すことができる。★階層構造や、クラス名などの属性を確認できる。セレクタを書くための第一歩となる。開発者ツールを開いた状態。これからGoogleのロゴの要素を検索する。カーソルを検索したい要素に乗せた状態。クリックすると、Elementsタブが開き、htmlソース中の該当箇所へ飛ぶ。「1要素の検索」で選んだ要素を右クリックすると、画像のようなメニューがでてくる。これらの機能を使うと、cssセレクタやxpathを自動で生成できる。セレクタを書く際に便利な機能。(自動取得のセレクタだと冗長な場合がある。そのためそのまま使うことは少なく、大抵省略、書き換えをして使っている)※4※4:また、idを持つ要素を優先的に最上位にしてセレクタを作成するらしく、idやクラスで自動採番するフレームワークなどを使っている場合など、使用の適さない場面が想定される。セレクタの自動取得方法。XPath”はxpathを取得する。3セレクタから要素を1つ取得Consoleタブを開き、セレクタを打つとセレクタに該当する要素を一つ返す。★セレクタが合っているかの確認や、簡単な階層構造の確認に使える。※5:セレクタに該当する要素が画面上に複数あっても、最初に見つかった要素だけを返す。cssセレクタで要素を1つ選ぶ場合。Console上で階層構造を操作できるので簡単な階層の確認などがしやすい。4cssセレクタ、xpathから要素を複数取得Consoleタブを開き、cssセレクタやxpathを指定して要素を複数取得できる。「想定外の要素が指定に該当していないか?」などの確認によく使っている。出てきた行をクリックするとElementsタブの該当箇所に飛ぶことができる。cssセレクタで要素を複数選ぶ場合。xpathで要素を複数選ぶ場合。cssセレクタと大きく違うのは、xpathでは階層を遡る指定方法ができること。4.メソッドの特徴(cssセレクタとxpath)Seleniumで要素を取得するためのメソッドはいくつかある。クラス名やidによる指定は、cssセレクタ・xpathで代用することができるが、cssセレクタやxpathに関しては、同程度に複雑な条件指定ができるため、あまり違いを感じないかもしれない。私が使用を勧めるとしたら、cssセレクタだ。いうのも、xpathはクロスブラウザ対応に向いていないためである。xpathはブラウザ毎に独自の実装をしている場合があるため、xpathで実装した場合に、使用したブラウザによっては動かないことがあるらしい。動作するブラウザだけで使えばよい(クロスブラウザ対応が不要)場合などにはxpathの方が都合がよい場合もあるだろう。階層構造の移動を盛り込んだ指定をすることができる。開発に便利な機能がある私がSeleniumを使い始めた時一番大変だったのは、cssセレクタが合っているかどうかの確認でした。当初はブラウザの開発者ツールでセレクタの確認ができるなど知らなかったもので、よくNoSuchElementException(指定した要素が見つからない例外)を起こしていました。開発者ツールには便利な機能が沢山あるので、すべての機能を使いこなすことは難しいかもしれません。本記事を読み、ちょっとだけ効率的に開発できるようになる方がいらっしゃったらうれしいです。気になったり、興味が湧いた記事があったら、なんでもコメントしてみてね。コーポレートサイトの問い合わせ欄からでも大丈夫だよ。エンジニアリングソリューション事業部の平尾です。reserved.1週間IT業界を覗いてみませんか?詳細はこちら。