hitode909の日記

趣味はマリンスポーツですの日記です

テストでHTMLの要素をどうやって辿るか

HTMLでUIを作っていて,has_moreがfalseならなにも表示しない,has_moreがtrueなら「もっと読む」ボタンを出すとする.

has_moreにtrueを与えたときには要素が出て,has_moreがfalseを与えたときは要素が出てない,ということをテストしたい.

このときにやりかたはいろいろ考えられて,

  • ソースを正規表現で評価して/<button/iがあるか調べる
    • HTMLとしてパースしてないので偶然文字列が一致する可能性がある
  • getElementsByTagName的なものでbuttonタグを探す
    • buttonタグが複数出たときなど,変更に弱い
  • button.see-moreみたいにCSSセレクタで要素を探す
    • デザインの都合でsee-moreクラスを消してしまうとテストが落ちる
  • button.test-see-moreみたいにクラスを付与して,テスト用のセレクタtest-から始める
    • 変更には強いけど,ソースに謎のクラスが出てくるのが格好悪い
  • data-test-see-moreみたいなdata属性をつける
    • 変更には強いけどソースに謎のdata属性が出てくるのが格好悪い
  • (Reactを使ってたら)buttonにrefをつけてテストではrefで参照する
    • セレクタ問題からは開放されるけどアプリケーションの実装には不要なrefができる

いろいろあるけど最高のものはない,という話をしていて,今回はためしにrefつけてみよう,ということになった.これでは良いとか悪いとか,知見あったらください.