はじめに
4月になりました。新年度のシステム改修はひと段落したでしょうか。そして、新年度向けの動作確認テストはすでに完了していますか？
年度替わりのタイミングでこそ顕在化するバグがあります。この記事では、そのひとつである「プルダウンの選択肢が時間の経過で変わる」問題を取り上げ、mabl の JavaScript スニペットを使って 「上からn番目の選択肢を選ぶ」テスト を実装する方法を紹介します。
問題：テスト作成時と実行時で選択肢が変わる
2年前にテストを構築したシステムを想定してください。当時の画面には「令和6年」が選択できる年プルダウンがありました。テストでは「令和6年」という値を指定して動作確認を行っていました。
しかし現在、そのシステムは「現在の年の前後1年」しか選択できない仕様になっています。つまり今（2026年）実行すると、プルダウンには以下の3択しかありません。
| 順番 | 表示 |
|---|---|
| 1番目 | 令和7年(去年) |
| 2番目 | 令和8年(今年) |
| 3番目 | 令和9年(来年) |
「令和6年」という値を指定して選択しようとしたテストは、選択したい値が存在しないことでエラーになります。
やりたいこと：値ではなく「順番」で選択する
このような動的に変化する選択肢に対しては、「上からn番目の選択肢を選ぶ」 という指定方法が有効です。
- 1番目 → 常に去年
- 2番目 → 常に今年
- 3番目 → 常に来年
値が将来変わっても、「2番目(今年)を選ぶ」というテストは壊れません。
サンプルページの紹介
今回の説明のために、和暦で年・月・日を選択して送信するページを用意しました。
index.html
年・月・日をそれぞれカスタムドロップダウンで選択できます。
- 年: 去年・今年・来年を和暦で表示(JavaScriptで動的生成)
const REIWA_START = 2019;
function toReiwa(year) {
return '令和' + (year - REIWA_START + 1) + '年';
}
// 今年の前後1年を動的に生成
[todayYear - 1, todayYear, todayYear + 1].forEach(function(year, idx) {
var li = document.createElement('li');
li.textContent = toReiwa(year);
li.setAttribute('data-testid', 'nen-option-' + (idx + 1));
// ...
nenOptions.appendChild(li);
});
- 月: 1月～12月を固定表示(HTMLにハードコード)
<!-- 月ドロップダウン（HTML にハードコード） -->
<ul id="tsuki-options" data-testid="tsuki-options" class="dropdown-list" role="listbox">
<li role="option" data-value="1" data-testid="tsuki-option-1" >1月</li>
<li role="option" data-value="2" data-testid="tsuki-option-2" >2月</li>
<!-- ... -->
<li role="option" data-value="12" data-testid="tsuki-option-12">12月</li>
</ul>
- 日: 選択した年・月に応じて28～31日を動的切り替え(うるう年対応)
- 初期値は現在の年月日
result.html
フォーム送信後、選択した年月日を和暦で表示します。
// URLパラメータ year / month / day を受け取り和暦で表示
if (year && month && day) {
display.textContent = toReiwa(year) + month + '月' + day + '日';
}
mablでの操作：JavaScriptスニペットでn番目を選択する
mabl の JavaScriptスニペット を使えば、ドロップダウンの開閉と選択を1ステップで実行でき、選択した値を変数として後続ステップに渡せます。
function mablJavaScriptStep(mablInputs, callback, pos = '1') {
// ドロップダウンを開く
document.querySelector('[data-testid="nen-toggle"]').click();
// pos 番目の <li> をクリック
var li = document.querySelector('[data-testid="nen-option-' + pos + '"]');
li.click();
// 選択した値（例: 令和7年）をコールバックで返す
callback(li.textContent);
}
posには mabl の変数を渡すこともできるため、テストケースごとに変数の値を切り替えるだけで「去年」「今年」「来年」の3パターンに対応できます。
| pos | 選択される値 | 用途例 |
|---|---|---|
| "1" | 令和7年 | 前年度データの確認 |
| "2" | 令和8年 | 今年度の通常テスト |
| "3" | 令和9年 | 先行登録・予約機能の確認 |
月・日も同様のスニペットで統一できます。
| スニペット名 | 引数pos
|
用途 |
|---|---|---|
| SelectNenByPos | 1～3 | 年(去年/今年/来年) |
| SelectTsukiByPos | 1～12 | 月 |
| SelectHiByPos | 1～31 | 日 |
まとめ
- プルダウンの選択肢が動的に変わる画面では、値ではなく「n番目」で指定するテスト設計が壊れにくい
- mabl の JavaScriptスニペット を使えば、ドロップダウンの開閉と選択を1ステップで実行でき、選択した値を変数として後続ステップに渡せる
- 年度切り替えのタイミングが来る前に、このようなテスト設計を見直しておくことで、毎年4月のリグレッションを防ぎやすくなる
それでは、Happy Testing!