デイトピッカー(Date Picker)
予約フォームなどでよく見かける、カレンダーから日付を選択する「デイトピッカー」の操作に挑戦しましょう。
| 利用頻度 | 難易度 |
|---|---|
| ★★☆☆☆ | ★★☆☆☆ |
デイトピッカーに日付を入力する方法を学びます。今回はカレンダーのUIを一つ一つクリックするのではなく、もっと賢くて、より実践的な方法を使います。
まずは...
⚠️ 固定日付で自動テストする危険性
デイトピッカーの入力欄に、fill("01/01/2025") のように固定の日付を書き込むのは、実は非常に危険です。
なぜなら、多くの予約サイトでは「過去の日付は選択できない」ように制限されているため、テストを実行する次の日には、その日付が過去のものとなり、テストが失敗してしまうからです。
🔄 解決策：プログラムで「明日の日付」を取得する
この問題を解決するために、私たちは**「テストを実行したその日にとっての、明日の日付」をプログラムで自動的に取得**し、それを使う方法を学びます。
こうすることで、テストが明日も、一週間後も、一年後も安定して動き続ける、メンテナンス不要の賢いテストを書くことができるのです。
今回使用するコマンド：getTomorrowMDY()
getTomorrowMDY() は、この課題で特別に用意された、「明日の日付」を "月/日/年" の形式で取得してくれる便利な機能（ヘルパー関数）です。
基本的な書き方
// 日付を入力する場合
await page.[ここにPick locatorで取得したコード].fill(getTomorrowMDY());
やってみよう
以下の手順に沿って、デイトピッカーに「明日の日付」を入力するテストコードを完成させてください。
演習ファイル
tests/document-2/lesson-11.spec.ts
入力する値
| 項目 | 入力する値 |
|---|---|
| Select Date | テスト実行日の翌日 |
手順動画
手順
- デバッグ実行： ブレークポイントで目的の画面で止める
- 要素の特定： Pick locator を使ってコードを取得する
- コードの記述： 取得したコードを元に処理を完成させる
- 最終確認： テストを実行し、passed を確認する
ちなみに...
getTomorrowMDY() は、この教材の lib/modules/utils.ts というファイルの中に定義されている、オリジナルの便利機能です。
ここで覚えてほしいのは、コマンドの名前そのものではなく、**「日付のような変わりやすい値は、プログラムで動的に生成することで、テストを安定させられる」**という、非常に重要な考え方です。
⚠️ 重要
tests/document-2/lesson-11.spec.tsの4行目にある以下の1行を追加しないとgetTomorrowMDY()は使用できません（最終課題で使用する際は漏れがないようにご確認ください）import { getTomorrowMDY } from "@modules/utils";