セレクター設定のコツ - 演算子「含む」に変更する

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

以下の記事のようにMSNのサイトのニュース欄のひとつのニュースをUI要素として取得する。

するとこのようなセレクターが自動取得される。

mainから始まってdivなどなどたくさんの階層の値が指定されている。ウェブページが更新されてもしdivのclass等の名称がこのうち一文字でも変わったりするとクリックができなくなる。classが特定の文字列と「等しい」といった厳しい条件を複数指定しているためだ。わずかな変更にも弱い状態である。変更に対してもう少し強く柔軟にするためには、セレクターの値指定の演算子を「と等しい」ではなく「含む」とするとよい。

例えば下から2階層目の「li」には「Class="hdlist  primary"」と指定されている。自動取得されたセレクターをよく確認してみるとなんとhdlistとprimaryの間に半角スペースが2つ入っている。サイト運営者がいつ半角スペース一つに更新してもおかしくない。脆弱である。

ここでビジネス要件やウェブページ管理者の気持ちを強くイメージする。そしてなかば勘で更新が少なそうな、変化しなさそうな文字列にあたりをつける。例えば「primaryを含む」という条件に変更する。

演算子「含む」に変えることでセレクタービルダーの下部にあるセレクターも変わる。演算子「と等しい」は「=」、演算子「含む」は「*=」になる。

これでもし半角スペース一つに更新されたとしても問題なく対象を指定することができる。「primaryを含む」にしたのであるから、もちろんclassを「hdlist secondary」などに更新されると動かなくなる。その場合は「hdlistを含む」という条件のほうが今後はよさそうであることが分かる。時間はかかるが、エラーに遭遇し修正を繰り返していくとウェブページ更新の方向性や更新されやすい箇所が少しずつわかってきてさらに適した方法で設定できるようにもなる。ただこれは受動的すぎるかもしれず、もしかしたらウェブページの作り方の詳細を知っているともっと適切な指定方法を選んでいけるのかもしれない。