ローコード自動化ツール「mabl」#4 ～使ってみた所感～確認内容に日時が関係する場合の実装方法

テストエンジニアのマッツーです。

前回の記事ではテスト自動化における「アサーション」の機能や活用方法について操作方法や所感をお伝えしました。

今回はテスト自動化において確認内容に日時が関係するような場合の実装方法について、操作方法や所感を書いていきます。

確認内容に日時が関係するケースはテスト自動化において登場する可能性が高いと思いますが、いざ実装するとなると少々難しかった点もありました。

機能の内容だけでなく実際の自動テスト実装で感じたことを書いていくので最後まで読んでいただければと思います。

過去の記事はこちらになります。

ローコード自動化ツール「mabl」とコードの使用について
現在日時のアサーションの考え方
JSスニペットで現在時刻を取得してみる
取得した現在時刻の使い方
mablにおけるタイムゾーンについて
まとめ

ローコード自動化ツール「mabl」とコードの使用について

初めに、mablではコードを使用せずにテスト自動化を行うことが可能ですが、一部の実装内容については画面操作やトレーナーの操作のみでは実現が難しい場合があります。
本記事ではJavaScriptスニペット（以下、JSスニペット）を使用しての内容となります。

JavaScriptスニペットはコードの書き方や使用方法など初めてだと戸惑うところもあるかもしれませんが、それらについても併せて解説していきます。
ただ、時刻に関するアサーションは今後mablのアップデートによりJSスニペットを使用せずに実装可能となる可能性もあります。

現在日時のアサーションの考え方

今回は「日時を表示」ボタンを押下すると現在の日時が「現在時刻 YYYY/MM/DD hh:mm」と表示されるwebサイトを考えます。
デフォルトでは日時が表示されておらず、ボタンを押下すると日時が表示され再度押下すると日時が更新という仕組みになっています。

この画面において、ボタンを押下したときに日時が表示されることを確認したいと考えます。
単に「現在時刻 YYYY/MM/DD hh:mm」が表示されることを確認したいだけであれば前回記事で紹介したアサーションの一種であるcontainsを使用して「現在時刻」の文字が表示されることを確認するだけで済みます。
しかし、日時の表示は常に変化しているため現在時刻が正しいことの確認や複数回押下した場合に時刻が更新されることの確認はこの方法では実装できません。

そこで、時刻が更新されることを確認できるよう以下の方法を試してみます。

JSスニペットで現在時刻を取得してみる

mablの基本機能には現在時刻を取得してアサーションする機能は現状存在していません。

そのため、まずJSスニペットでタイムスタンプを取得しその値を変数としてアサーションに使用するという方法を考えます。
JSスニペットを使用するには、トレーナーの「+」ボタン押下後、「JavaScript」を選択し「新規」を押下すると以下のようなエディタが表示されます。

トレーナーの「+」ボタン押下後、「JavaScript」を選択し「新規」を押下したときのエディタ画面

このエディタ内に必要なコードを書き込むことで使用することができるようになります。

ここで、アサーションに使用するためにはただタイムスタンプを取得するだけでなく以下に注意する必要があります。

日本標準時(JST)に変換する
表示形式を「現在時刻 YYYY/MM/DD hh:mm」とする

これらを考慮して記述したものが以下になります。

const now = new Date();

// JSTはUTCに +9時間（ミリ秒で加算）

const jst = new Date(now.getTime() + 9 * 60 * 60 * 1000);

// JST時刻を使用してフォーマット

const year = jst.getUTCFullYear();

const month = String(jst.getUTCMonth() + 1).padStart(2, '0');

const day = String(jst.getUTCDate()).padStart(2, '0');

const hours = String(jst.getUTCHours()).padStart(2, '0');

const minutes = String(jst.getUTCMinutes()).padStart(2, '0');

const formatted = `現在時刻 ${year}/${month}/${day} ${hours}:${minutes}`;

callback(formatted);

JSTはUTCより9時間進んでいるため取得した時刻に9×60×60×1000を足して調整しています。

その後、年月日時分をそれぞれ取得し最後に表示形式に合わせて出力するようにしています。

各要素の取得には「getMinutes」のようにUTCを省略して記述することも可能ですが、mablでクラウド実行する際にタイムゾーンが絡んでくるためここでは「getUTCMinutes」のようにUTCで固定するようにしています。

mablでのクラウド実行におけるタイムゾーンの設定は後ほど紹介します。

これをエディタ内に記述し、実行ボタンを押下した結果が以下のようになります。

正しいフォーマットで時刻が表示されていることが確認できました。

このJSスニペットを使用するためには、保存ボタン右の「▼」ボタンから「新しい再利用可能なスニペットの保存」を選択する必要があります。

取得した現在時刻の使い方

次に保存したJSスニペットを使用してアサーションを行う方法を解説します。

ただ、直接JSスニペットを使用することはできないのでまずは変数を作成していきます。

作成方法は「+」ボタンから「変数」を開き「新しい変数を作成」を選択し、変数の設定から「JavaScript」を選択すると先ほど作成したJSスニペットを選択できるようになります。

変数名を設定して「OK」ボタンを押下すれば変数の作成は完了です。

後はこの変数をアサーション作成の際に設定すればOKです。

比較対象で変数を選択し、先ほど作成した変数を選択します。

この時「期待する値」の欄に現在時刻と異なる時刻が表示されていると思いますが、テスト実行時にはこの値ではなく現在時刻を取得してアサーションを行うので気にしなくて大丈夫です。

以上で現在時刻の取得からアサーションまで完了となります。

mablにおけるタイムゾーンについて

テストの作成が完了したところで、早速実行してみましょう。

ただし、このままクラウド実行を行うと実行結果がNGとなってしまいます。

実行結果のリザルトを確認すると期待値が「現在時刻 2025/06/16 20:11」に対し、実行時の値が「現在時刻 2025/06/16 11:01」となってしまっています。

丁度9時間ずれていることからもわかる通り、テスト作成時にはJSTだったタイムゾーンがテスト実行時にUTCになってしまっているのが原因です。

そこで、テスト実行時にJSTで実行できるように設定する必要があります。

尚、ローカル実行では特に指定しなくてもテスト作成時と同じタイムゾーンで実行可能であるため、クラウド実行やプラン実行を行った場合のみNGが出ている場合にはタイムゾーンの確認を行いましょう。

設定方法自体は簡単で、「カスタマローカライズ設定」をオンにすると複数の項目が表示されます。

この中で、タイムゾーンを環境に合ったものに変更すればOKです。

今回の場合「Asia/Tokyo」を選択します。

この設定を行った後に再び実行してみます。

無事テスト結果は成功となりました。

まとめ

今回はテスト自動化において確認内容に日時が関係するような場合の実装方法について書いてきました。

特に気になった点は以下の通りです。

・デフォルトで日時に関するアサーションを実装できずJSスニペットが必要な点

テスト自動化において日時に関連する確認項目は少なからず出てくるように思いますがノーコードでは現状実装できない点が気になりました。

ただし、生成AIによるJSスニペット作成補助機能はmablに存在するのでプログラミング知識が少なくても以前よりコードを書きやすくなったのは利点でもあります。

テスト作成時に変数を選択した際に「期待する値」に現在時刻が表示されない点
- これは仕様上仕方ない部分でもありますが、初めてテスト作成する際にはトレーナー上に現在時刻が表示されないため実行するまで期待値を正しく確認できるかわからない点は少し不安がありました。
テスト実行時のデフォルトがUTCになっており、カスタマローカライズ設定を押下しないとタイムゾーンが選択できない点
- これについては知っていれば問題ありませんが、私は最初テストが失敗したときに原因を発見するまで数十分ほどかかってしまったので、テスト失敗時にカスタマローカライズ設定の見直しが必要になることが表示されるとよいと感じました。

一方、コード知識が浅くても日時確認のような動的な要素をテストすることができるのもmablの良さであります。

アップデートによりJSスニペットの使用ハードルは下がっていますし、今後さらに便利になることも十分考えられます。

次回以降も様々な機能や特徴についてお伝えしていこうと思います。