セレクトメニュー(Select Menu)

👆 これがセレクトメニューです！クリックして選択してみてください

Old Style Select Menu

Standard multi select

複数の選択肢の中から、一つ（または複数）を選ぶ「セレクトメニュー」の操作に挑戦しましょう。

利用頻度	難易度
★★★★★	★★☆☆☆

Playwrightを使って、セレクトメニュー（ドロップダウン）から項目を選択する方法を学びます。住所の都道府県選択や、カテゴリの絞り込みなど、実務で非常によく使われるUIです。選択肢を開いて、特定の項目を選ぶという流れは、フォーム操作の中でも基本中の基本です。

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

セレクトメニューから値を選択する場合は、selectOption() という専用のコマンドを使用します。

ユーザーが画面上で見ている、そのままの表示名（ラベル）で選択する方法です。最も直感的で、変更に強い書き方です。

await page.[ここにPick locatorで取得したコード].selectOption({ label: "ラベル名" });

// 「Blue」というラベルの選択肢を選ぶ場合
await page.locator('#oldSelectMenu').selectOption({ label: 'Blue' });

HTMLの設計図に書かれているvalueという属性値で選択する方法です。

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

// value="audi" という属性を持つ選択肢を選ぶ場合
await page.locator('#oldSelectMenu').selectOption('audi');

以下の手順に沿って、2種類のセレクトメニューから指定された項目を選択するテストコードを完成させてください。

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

項目	選択する値
Old Style Select Menu	Black
Standard multi select	Audi

ファイルを開く： VSCodeで、上記の演習ファイルを開きます
ブレークポイントで一時停止： コードを書きたい場所の少し手前にブレークポイント（赤い丸印）を設定して、デバッグモードでテストを実行して、目的の画面で一時停止させます
Pick locatorで要素を特定： 「Pick locator」を使って、操作したいセレクトメニュー（例: Old Style Select Menu）をクリックし、その要素を特定するためのコードを取得します
コードを書く： 取得したコードと selectOption() を組み合わせて、項目を選択する処理を完成させます
残りも同様に： 同じ手順で、もう一つのセレクトメニューを操作するコードも書き上げます
最終確認： ブレークポイントを全て外し、もう一度テストを実行します。緑色の「passed」が表示されたら、課題は完了です！

✍️ 次回以降から、手順の詳しい説明は省略いたします。 これまでと同じように、指定の演習ファイルを開き、ブレークポイントを設定して要素の取得・定義を行い、テストを実行するという流れを試してみてください。

基本的には、ユーザーが見ているラベル名で選択する方が、テストが安定しやすいためおすすめです。value属性には、idのような数字が使われていることもあり、将来的に変更される可能性があるからです。

まずは「labelで選ぶ」と覚えておきましょう。

一つ、非常に重要な注意点があります。selectOption() は、HTMLの <select> というタグで作られた、昔ながらのセレクトメニュー専用のコマンドです。

最近のWebサイトでは、デザイン性を高めるために、<select> タグを使わずに <div> などを組み合わせて作られた、おしゃれなカスタムドロップダウンが非常によく使われます。

このカスタムドロップダウンには selectOption() は使えません。

その場合は、私たちが普段マウスで行う操作と同じように、2段階の click() で操作します。