【α版】Seleniumの要素を特定する（ベスト？）プラクティス xpath記法とdata属性の合わせ技

目的

Seleniumでテストコードを書くときに、クリックする対象などを特定しますが、方法はいろいろあります。
ある程度方法を決めることで、ソースのメンテナンス性が向上します。
（検証中なので、考え方変わるかもしれません）

前提

• selenium2
• node.js （他の言語でも応用可能）
• テストフレームワークなどはシンプルにしたいので割愛

（ベスト？）プラクティス

html側でdata属性を利用し、selenium側（ロケータ）ではxpath記法を使うのが良いと考えています。

回帰テスト対象

<a id='login' class='button login_button' data-selenium='login'>ログイン</a>

seleniumのロケータ

const webdriver = require('selenium-webdriver');
const By        = webdriver.By;
driver.findElement(By.xpath("//a[@data-selenium='login']")).click();

理由

1. data属性を使い依存性を解消
2. wrapperが作りやすい
3. xpath記法だと汎用性が高い

1. data属性を使い依存性を解消

seleniumで要素を特定するときには様々な方法があります。

回帰テスト対象

<a id='login' class='button login_button' data-selenium='login'>ログイン</a>

いろいろなロケータ

By.id("login"); // ID
By.className("login_button"); // CSSクラス名
By.xpath("//a[@data-selenium='login']"); // xpath

IDやCSSクラス名は、HTML（ビュー）/CSSで使われます。ビューやデザインの都合で変更する可能性が高く依存関係ができてしまいます。
例えば、デザインを全面的に変更する場合、CSSクラス名が変更される可能性があります。そうすると、Seleniumも書き直しとなります。
そこで、data属性を利用します。data属性は任意で決めることが可能で、seleniumでしか使わないと規約で定めることで、依存関係を解消することが可能です。

2. wrapperが作りやすい

ロケータが複数あると、wrapできなくなり、便利なメソッドが作りにくくなります。

※wrapperメソッドの例

3. xpath記法だと汎用性が高い

data属性を使うことをおすすめしますが、idやclass名で指定することが可能です。

xpathの汎用性

By.xpath("//a[@data-selenium='login']"); // data属性 おすすめ
By.xpath("//a[@id='login']"); // idでも指定可能
By.xpath("//a[@class='button login_button']"); // classでも指定可能

関連記事

テスト！テスト！テスト！〜Seleniumの役割を明確にしてちょうどいいテスト自動化を実現〜
いまこれ Seleniumの要素を特定する（ベスト？）プラクティス xpath記法とdata属性の合わせ技