はじめに

4月になりました。新年度のシステム改修はひと段落したでしょうか。そして、新年度向けの動作確認テストはすでに完了していますか？

年度替わりのタイミングでこそ顕在化するバグがあります。この記事では、そのひとつである「プルダウンの選択肢が時間の経過で変わる」問題を取り上げ、mabl の JavaScript スニペットを使って「上からn番目の選択肢を選ぶ」テストを実装する方法を紹介します。

問題：テスト作成時と実行時で選択肢が変わる

2年前にテストを構築したシステムを想定してください。当時の画面には「令和6年」が選択できる年プルダウンがありました。テストでは「令和6年」という値を指定して動作確認を行っていました。

しかし現在、そのシステムは「現在の年の前後1年」しか選択できない仕様になっています。つまり今（2026年）実行すると、プルダウンには以下の3択しかありません。

順番	表示
1番目	令和7年(去年)
2番目	令和8年(今年)
3番目	令和9年(来年)

「令和6年」という値を指定して選択しようとしたテストは、選択したい値が存在しないことでエラーになります。

やりたいこと：値ではなく「順番」で選択する

このような動的に変化する選択肢に対しては、「上からn番目の選択肢を選ぶ」 という指定方法が有効です。

1番目 → 常に去年
2番目 → 常に今年
3番目 → 常に来年

値が将来変わっても、「2番目(今年)を選ぶ」というテストは壊れません。

サンプルページの紹介

今回の説明のために、和暦で年・月・日を選択して送信するページを用意しました。

index.html

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

result.html (選択結果表示)

フォーム送信後、選択した年月日を和暦で表示します。

// URLパラメータ year / month / day を受け取り和暦で表示
if (year && month && day) {
    display.textContent = toReiwa(year) + month + '月' + day + '日';
}

mablでの操作：JavaScriptスニペットでn番目を選択する

mabl の JavaScriptスニペットを使えば、ドロップダウンの開閉と選択を1ステップで実行でき、選択した値を変数として後続ステップに渡せます。

スニペット名: SelectNenByPos

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!