名前を付けよう

はじめまして。ヒューマンクレストの関谷です。

SeleniumによるUI自動化テストの運用・保守を担当しております。

以下、すで対策されているプロジェクトでは、ごく当たり前、題名でオチが見えてる方も多々いらっしゃるかとは思いますが、その際はご容赦ください。

Seleniumによるテストを保守する中で、一番大きな（そして、ほとんどといっても過言ではない）作業が、ユーザインターフェースの更新に伴う、locator変更です。これは日々、みなさんも苦労されている所かと思います。
なぜこんなに調査しないといけないのか。

Selenium公式サイトのIntroduction冒頭を見てみましょう。

Frequent regression testing

自動テストの利点として「頻繁なリグレッションテスト」が挙げられています。
なるほど、向いていそうです。

同時に、selenium公式サイトのドキュメントでは

For instance, if the application’s user interface will change considerably in the near future, then any automation might need to be rewritten anyway.Also, sometimes there simply is not enough time to build test automation. For the short term, manual testing may be more effective. If an application has a very tight deadline, there is currently no test automation available, and it’s imperative that the testing get done within that time frame, then manual testing is the best solution.

テスト自動化を行う時間が十分にない場合や、近い将来ユーザインターフェースが大幅に変わる時には手動の方がマシ（超意訳）とはっきり書かれています。
なるほど、向いてないと。・・・・向いてない？

内部的な動作変更のみならともかく、webアプリケーションのアップデートでは多くの場合、UI変更を伴います。アップデート、その開発の最中にこそ、リグレッションテストを回したい。

しかし「近い将来ユーザインターフェースが大幅に変わる時には手動の方がマシ」ということは、SeleniumはUI開発中のリグレッションテストに向かない事になります。というか、xpath、cssSelectorで操作してるツールは全てアウトです。

なるほど！なるほどなるほど！
よしわかった、自動やめて手動テストに戻りましょう！

ではなく。

当サイトのlogo(aタグ)を例に考えてみます。

<header id=”branding” role=”banner”>
<nav id=”access” role=”navigation”>略</nav>
<div class=”clearfix”></div>
<a href=”https://quesqa.com/”>
<img src=”https://quesqa.com/blog/wp-content/uploads/2013/04/headerLogo1.png” alt=”” height=”160″ width=”1000″>
</a>
</header>

特徴としては

headerの中にあるa
aのhref
imgのファイル名

といったところでしょうか。それぞれ、xpathで表記してみます。

//header/a
//a[@href=’https://quesqa.com/’]
//img[@src=’https://quesqa.com/blog/wp-content/uploads/2013/04/headerLogo1.png’]/parent::a

上記locatorが無効となるUIのアップデートしては、以下のような状況が考えられます。

//header/a
- header内、logoの兄弟要素にaタグが増える
- headerとaタグの間にデザイン調整用のdivが入る
//a[@href=’https://quesqa.com/’]
- 同一のリンク先を持つaが増える
- TOPページURLの変更
//img[@src=’https://quesqa.com/blog/wp-content/uploads/2013/04/headerLogo1.png’]/parent::a
- logo画像URLの変更
- headerとaタグの間にデザイン調整用のdivが入る(parentでなくなる)

いとも簡単にlocate出来なくなりますね！
最高！
まさにUI自動化って感じです！

大幅なアップデートどころか、１つリンクが増える、ちょっとしたUIのデザイン調整が入る等の軽微な修正ですら、テストが止まります。これでは、UI更新を含むアップデート時のリグレッションテストには使えません。
こまめなデザイン修正が行われる案件では、テスト開発・修正の工数の方が膨れ上がる⇒UI自動テストを諦めて手動に戻る、なんて事になりかねません。

一番求められるテストに向かない。
それじゃあ誰も幸せになれない。どうするか。

現時点での私個人の答えとしては「html構造とは別の操作トリガを仕込む」が最適解と考えています。やり方はいたってシンプルです。

<header id=”branding” role=”banner”>
<nav id=”access” role=”navigation”>略</nav>
<div class=”clearfix”></div>
<a href=”https://quesqa.com/” name=”logo”>
<img src=”https://quesqa.com/blog/wp-content/uploads/2013/04/headerLogo1.png” alt=”” height=”160″ width=”1000″>
</a>
</header>

logoのaタグにnameを仕込むだけ。

たったこれだけで、headerタグ内にlogoがある限り「//header//*[@name=’logo’]は一意なselectorになります。
header内であれば、どうレイアウトが調整されようが、リンク先URLが変更になろうが自由です。ここまでシンプルになればCSSselectorを使って「header [name=logo]」でもOK。xpathよりも高速にlocateできます。

name属性は、inputform以外ではページ内アンカーとして使用されていましたが、その役割をid属性に譲り渡し、form以外ではほぼ用のない属性になっています。formにつけられているnameは、内部動作と関連付いているため、そもそも変更されにくく、form以外の他タグにnameを付ける事も考えにくい。用事がないから、変更されることもそうそうない。役割が無くなりつつあり、かわいそうな方向に向かっているnameはいっそ、UIテスト用にしてしまいましょう。

ここまでで、お気づきになられたかと思われますが「仕込む」のはテスト開発者ではありません。

プロダクトの開発者が、開発段階で「仕込む」ことが必須です。
既存のclass,idとかぶらないようなルール付けも必要となります。開発の初期段階で、UIテストをすることを前提に仕込んでおき、testableな状態であるのが最も望ましいですが、新たにUI自動テストを導入する案件の場合は、追加で仕込む必要があります。
新たな工数が発生することもあり、躊躇されるかもしれません。

しかし、一旦仕込んでしまえば、皆が幸せになれるハズです。さらっと考えただけでも、以下のメリットが挙げられます。

テスト開発者

アップデート時のlocator調査作業時間の短縮
locate不可によるテストバグ・サービスバグの切り分け速度の向上、それに伴う素早いフィードバック
調査時間短縮により新たなテスト開発が可能に

プロダクト開発者

コミット>ビルド直後、即座にリグレッションテストがまわせる（新機能以外は回るはず）
素早いバグ発見により、早めの修正対応が可能

いかがでしょうか。
少しでもlocator調査の時間が減り、頻繁にアップデートのあるプロジェクトでも、ガンガンテストを回せることを願っています。

うちのサービスではnameをjsでの制御用に使っていて、しょっちゅうnameも変わるんだぜ！というお方。
もしいらっしゃいましたら、その対策をコメント欄でご教示頂けると幸いです。