- 印刷
- ダークライト
この記事では、日時を入力するステップでテストが失敗する原因と、その対応方法について紹介します。
ブラウザの言語設定が、レコーディング時とテスト実行時とで異なる
原因
日付や時刻のinput要素は、ブラウザの言語設定によって、表示形式が異なる場合があります。
一例として、 Chrome において、日付の input 要素は、
- 表示言語が日本語の場合、 年/月/日(yyyy/mm/dd) 形式
- 表示言語が英語(アメリカ合衆国)の場合、 mm/dd/yyyy 形式
で表示されます。
日本語環境でレコーディングを行ったが、実行環境のブラウザは表示言語が英語(アメリカ合衆国)に設定されていた(もしくはその逆)場合、入力される日付文字列と、 input 要素の表示形式の間に食い違いが発生し、うまく入力が行えません。
対応方法
<input type="date">
が持つvalueの値は、常にyyyy-mm-dd
(ISO8601)形式をとり、ブラウザ上の表示の影響を受けません。そのためInput要素に値を設定するスニペットを参考に、JSステップで日時を入力することで、意図した日時を入力することが可能です。
「年」が 4 桁より多く入力可能な状態になっている
原因
<input type="date">
の max 属性を設定していない場合、「年」の値は最大6桁まで入力可能な状態となります。
このとき、 「2021年1月1日」を意図した「20210101」のような入力が、テスト実行時に「6文字目まで年の値である」とブラウザに判断され、「202101/01/(日付は未入力)」という状態になってしまうことがあります。
対応方法
レコーディング後、以下のように入力値を編集してください。
- 「年」の値の先頭をゼロ埋めして 6 桁とする。
- 加えて、スラッシュ(/)もしくはダッシュ(-)で年・月・日を区切る。(ブラウザによっては、これらの記号の入力を年・月・日の区切りと認識するため)
例えば、「2021年1月1日」であれば、「002021-01-01」と入力します。
ブラウザ依存の UI(ポップアップ表示されるカレンダー等)を利用して入力している
原因
ブラウザによっては、カレンダー形式のユーザーインターフェースをサポートしていることがあります。
例えば、レコーディングに使用される Chrome ブラウザの場合、以下のような UI が表示されます。
これらの UI は HTML で定義されたものではなく、そのブラウザ独自の実装となるため、意図した通りのレコーディングおよびテストを行うことはできません(ただし、何らかのライブラリを使用してクロスブラウザで動作する UI を描画している場合は、テストが可能な場合があります)。
対応方法
上記の通り、ブラウザに依存した UI の操作はサポートされていません。Input要素に値を設定するスニペットを参考に、JSステップでの日時の入力やテキスト入力での方法を検討してください。
時刻入力欄がテスト実行時に12時制になる
時刻入力欄に <input type="time"> を使用している場合、時と分が12時制と24時制どちらで表示されるかは、オペレーティングシステムのロケールによって決まります。
Autifyのテスト実行環境では12時制が採用されるため、レコーディング時は24時制で表示されていた場合、この差により時刻が正しく入力されず、テストが失敗することがあります。
対応方法
time
入力欄の value
は、オペレーティングシステムのロケールに影響を受けず、常に先頭にゼロを含むhh:mm
(24時制)の書式です。そのため、Input要素に値を設定するスニペットを参考に、JSステップを使用して直接 value
を変更することで、レコーディング時とテスト実行時で12時制と24時制の表示の差がある場合でも、同じ時刻を設定することが可能です。
以下、Input要素に値を設定するスニペットのselector
とsetValue
に設定する値の例です。
// 例
var selector = 'input[type="time"]';
var setValue = "13:00";
・
・
参考記事
(MDN Web Docs に移動します)