日時入力のステップでテストが失敗する

日時を入力する input 要素に対して、テスト実行が失敗してしまう場合、考えられる原因は複数あり、それぞれ対応の方法も異なってきます。

ブラウザの言語設定が、レコーディング時とテスト実行時とで異なる

原因の説明

日付や時刻の input 要素は、ブラウザの言語設定によって、表示形式が異なる場合があります。

一例として、 Chrome において、日付の input 要素は、

• 表示言語が日本語の場合、 年/月/日（yyyy/mm/dd） 形式
• 表示言語が英語（アメリカ合衆国）の場合、 mm/dd/yyyy 形式

で表示されます。

日本語環境でレコーディングを行ったが、実行環境のブラウザは表示言語が英語（アメリカ合衆国）に設定されていた（もしくはその逆）場合、入力される日付文字列と、 input 要素の表示形式の間に食い違いが発生し、うまく入力が行えません。

対応方法

Autify が提供しているvalue の値は、常に yyyy-mm-dd （ISO8601）形式をとり、ブラウザ上の表示の影響を受けません。（注1）

参考記事に詳しい説明がありますので、そちらも併せてご参照ください。

「年」が 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 で定義されたものではなく、そのブラウザ独自の実装となるため、レコーディング、およびテストを行うことはできません。（注2）

対応方法

上記の通り、ブラウザに依存した UI の操作はサポートされておりません。

テキスト入力によるテストで代替することを検討してください。

注釈

1. Reactなどの一部のフレームワークでは、JavaScript で value を変更しただけでは、変更した値がアプリケーションの状態に反映されないことがあります。この場合は以下のように dispatchEvent を使用してみてください。

// 引数 input は querySelector 等で取得した要素、 
// 引数 value　はその要素に設定する値です。

function changeValue(input, value){
    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLInputElement.prototype, "value").set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
}

2. ただし、何らかのライブラリを使用して、クロスブラウザで動作する UI を描画している場合は、この限りではありません。

時刻入力欄がテスト実行時に12時制になる

時刻入力欄に <input type="time"> を使用している場合、時と分が12時制と24時制どちらで表示されるかは、オペレーティングシステムのロケールによって決まります。

Autifyのテスト実行環境では12時制が採用されるため、レコーディング時は24時制で表示されていた場合、この差により時刻が正しく入力されないなど、テストが失敗することがあります。

対応方法

time 入力欄の value は、常に先頭にゼロを含む 24 時制で hh:mm の書式です。
オペレーティングシステムのロケールに影響を受けないため、JSステップを使用して直接 value を変更することで、レコーディング時とテスト実行時で12時制と24時制の表示の差がある場合でも、同じ時刻を設定することが可能です。

// 例
const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '13:00';

参考記事

（MDN Web Docs に移動します）

• <input type="date">
• <input type="time">