ReactとSeleniumの相性が悪い気がするという話
問題点
ReactはHTMLタグ上、IDを使用する必要がないため、IDを使用してSeleniumにて要素を取得する場合、テストの(Selenium)だけのためのIDを付与する必要があるため相性が悪い
そもそもID以外でSeleniumにて要素は取得できないのか
IDの他にclass、タグ、テキストの内容など、複数の組み合わせで条件を絞り特定の要素を取得することが可能です。(取得のイメージとしてはJavaScriptのdocument.getElementByなどに近いです。)
reactで自動?生成されるclassや、特定の要素の中の何番目のdivみたいな取り方も出来ます。
ID以外で取得した場合の問題
ID以外で取得した場合、そのテストは問題なく動くのですが、将来的に動かなくなる可能性、もしくはメンテナンスコストがかかる可能性があります。
- 特定の文字例えばタイトルなどを条件に取得した場合、比較処理以前に取得出来なくなってしまいその処理から書き直す必要があります。
取得する条件によりますが、例えばこのページの「ID」を条件にする場合、複数IDという文字があるので、最後のIDの文字を取得したいにも関わらず、一番最初のIDを取得してしまいます。
- 書いたソースによりますが、Reactは条件に応じて、タグごと表示しないということができるため、何番目のという取り方をする場合、条件によって何番目か変わる可能性があり、取得出来ない。
逆にSeleniumと相性が良いものは
IDを付与するもの
getElementByIdやjQueryで要素を取得する際に、IDを使用する。
springbootのテンプレートエンジンのthymeleafなどサーバーから画面に値を渡す方法を使用した場合、IDが振られるもの
th:fieldなどをHTMLタグに埋め込んで値を渡すのですが、この際に実際のHTMLではid name valueなどに等値が振り分けられるため