マウスカーソルを乗せると、隠れていた選択肢が表示される「メニューバー」の操作に挑戦しましょう。

Playwrightを使って、メニューバーの項目にマウスカーソルを乗せる（ホバーする）操作を学びます。メニューバーは、サイトのナビゲーションなどで、多くの選択肢を階層的に見せるためによく使われます。

今回使用するコマンド：hover()

hover() は、指定した要素の上に、マウスカーソルをそっと乗せる動きを再現してくれる命令（コマンド）です。

基本的な書き方

await page.[ここにPick locatorで取得したコード].hover();

やってみよう

以下の手順に沿って、メニューバーをホバーしてテストコードを完成させてください。

演習ファイル

tests/document-2/lesson-12.spec.ts

行う操作

手順動画

手順

1. デバッグ実行： ブレークポイントで目的の画面で止める
2. 要素の特定： Pick locator を使ってコードを取得する
3. コードの記述： 取得したコードを元に処理を完成させる
4. 最終確認： テストを実行し、passed を確認する

ちなみに...

Webサイトによっては、hover() や click() をすると、逆にメニューが閉じてしまう、という意地悪な作りのものもあります。

そんな時は、キーボードの矢印キーやTabキーを押す動きを再現する press() というコマンドが役立ちます。

例えば、press('ArrowDown') と書けば、キーボードの下矢印キーを1回押す、という操作ができます。

これは少し応用的なテクニックですが、覚えておくと、いつか役に立つかもしれません。