[E2Eテスト自動化]SelectBoxの値を取得するのに意外と苦戦した話

こんにちは。SODAでQAエンジニアをやっているokauchiです。最近のテスト自動化での気づきをメモがてら紹介します！

目には見えているが、扱いがだいぶ異なる

入力欄に何が入力されていてるのか、その値に対してAssertionをかけて分岐を行いたい。これが要素が違うだけでだいぶ取得の難易度が違うんだなと思った話です。名前やメールアドレスなど単純なtextBoxであれば取得は簡単、どんな自動化ツールでも標準でサポートされているぐらいなんですが、今回はselectBoxです。同じ要素の入力値を取るだけでこんなに複雑になるなんて。

要素のテキストではなく、選択したテキストを取得する

選択された値というのを単純にjsステップでその要素の"element.textContent"に入ってくると思ったんですよね。ただ実際にそれで取得できる値は、すべてのアイテムが繋がったような文字列！何を選択しているのかもわからない！こんな単純なことなのに、実現できないもどかしさ！！

どうやって解決したか

幸い、elementのパラメータで要素のhtml情報を取得するものがあったのが救いでした。
以下のような流れで解決まで辿り着けました。

○検証で選択されている状態は何なのかを調べた　
　・optionで選択した値がselectedになっていることがわかる
○selectBoxのhtml情報を取得する
　・element.innerHTMLを利用する
○その要素の中からjsステップを用いてDOMに変換
　・selectedValueを抽出する

＊jsステップのほとんどはchatGPT頼りなので詳細は割愛します。

どれだけ簡単な自動化ツールでも技術力は必要ということは理解しよう

今回のケースは単純なselectBoxの選択された値を取得になるのですが、テスト自動化を進めると画面上は見えているのに、値の取得に試行錯誤が必要であったり、簡単に出来ると思っていたが故に時間がかかるギャップに焦りを感じたり。普段から自動化ツールを触ることで、今の自分たちの実力、出来ること、出来ないことを把握し、毎回一発本番で試すようなことは避けたいですね。