セレクター設定のコツ - 要素が一つだけの階層でclass等を指定しない

UI要素を取得した際のセレクターを適切に設定すると、ウェブサイトが更新されてもエラーにならず目的のリンクをクリックする等が可能となる。前回はひとつの方法としてセレクターの値設定の演算子を「含む」に変更する方法を確認した。つづいてもう一つ。要素が一つだけの階層でclass等を指定しない方法を確認。

そのほかのコツはこちらをご参照。

前回と同じ例でMSNのサイトのニュース欄のひとつのニュースのリンクをクリックするためのセレクターを考える。

前回確認したようにclass等が想定しない文字列に変わってしまうとクリック等ができなくなる。そのためclass等の文字列の指定を可能な限り少なくすると変更に強くなる。目的物を特定するために不要な指定がもしあればその指定を削除したい。不要なものを確認するためまずはウェブページの構造を確認する。

自動取得されたセレクターでは、以下の緑下線のdiv classやli classをもれなく指定して目的のリンクを特定していた。

不要なものの典型的な例は、タグが一つしか無い階層の条件指定だ。一つしか無いのでclassの文字列の条件を指定する必要がない。

例えばセレクターの一番下の階層の「a」の周辺部分の階層をHTML内で確認すると、ひとつ上の階層の「li」の中に「a」のタグは一つしか無いことが分かる。したがって自動取得されたセレクターの一番下の「a[Class="contentlink"]」は不要な指定をしており、ここは「a」だけ指定されていればよい。以下のようにセレクタービルダーで該当する階層のClassの「使用済み」のチェックボックスを外せばOK。

もう一つ上の階層の「li」の周辺の階層を確認する。タグ「ul」の中に複数の「li」が並列で存在することが分かる。タグが一つしか無い状況と異なり、目的物が入っている目的の「li」を特定するために条件を指定する必要がある。

まずはclass等の属性で条件指定できないか確認する。すべての「li」が同じclass名でありこれでは特定ができない。data-idは互いに異なる連番の値のため利用できそうであるが、data-idが「209」から始まる理由がわからずウェブページが更新された場合にどのように変化するか想像し難いため利用しないほうがよい。classなどの属性で条件指定することは難しそうなので、これはあきらめてセレクタービルダーでclassなどのチェックボックスを外した方がよい。

classなどの属性が特定に使えないので、ここは並び順でシンプルに指定することにする。そのためには属性Ordinalに数値を設定すればよい。Ordinalを0に設定すると一番最初の「li」を指定できる。Ordinalを1に設定すると２番めの「li」を指定できる。この「ul」の階層のなかの「li」は実際にはMSNのウェブページ上に並んでいる各ニュースに対応しており、ウェブページ上の１つ目のニュースのリンクをクリックするにはOrdinalは0を設定すればよい。

Classなどの属性の指定が無く、並び順だけが指定された「li:eq(0)」がセレクターに設定された。eqの括弧の中身が並び順である。「li:eq(0)」は一番最初の「li」、「li:eq(1)」は2番めの「li」を指定する。

このように一つ一つ階層を確認して行き不要なものをすべて精査した結果、最初と同じリンクが以下のセレクターで指定できることがわかった。余分なclassの指定がなくなって見た目もシンプルに、変化に強いセレクターとなった。