ページ上の特定の要素にマウスオーバー(ホバー)を行った際に、ドロップダウン式のメニューやボタン等が表示されるというデザインは、多くのサイトで使用されています。
ユーザーのマウスオーバー操作に応じて現れたり消えたりする要素は、多くの場合、マウスオーバーの時点で新たに生成されるようになっていたり、マウスオーバーが行われるまで見えない・触れない状態であったりします。
こうしたケースでは、例えばその要素に対するクリックやアサーションをレコーディングしただけでは、テスト実行時に以下のような事象が発生する場合があります。
- 間違った要素に反応してしまい、「要確認」になる
- 「対象の要素が見つからない」、あるいは「対象の要素が操作可能な状態にない」といったエラーが発生する
この場合、対象の要素へのクリックやアサーションのステップの前に、「対象の要素を出現させることを目的としたマウスオーバーを行う」というステップ(「ホバーステップ」)を追加することで、問題を回避することができます。
マウスオーバーのレコーディングについては参考記事をご確認ください。
テストシナリオの作成例
Autify ホームページ(2021 年 12 月時点のもの)を例にとって解説します。
以下のシナリオで期待される動作は、画面上部メニュー内の「関連資料」にマウスオーバーしたときに現れる、「ヘルプセンターの」リンクがクリックされることです。
成功例
テストシナリオ:
(マウスオーバーを行なってからクリックしています)
テスト結果:
(正しい場所をクリックできました)
失敗例
テストシナリオ:
(マウスオーバーをレコーディングせずにクリックしています)
テスト結果:
(画面の別の場所にある、似たような要素に反応してしまいました。その結果、「要確認」となっています)
参考記事
上記にてお困りごとが解決しない場合は、Autifyのチャットからご相談ください。