Help us understand the problem. What is going on with this article?

Chrome を使った e2e テストの <input type=date> への入力に注意

More than 1 year has passed since last update.

以下のような日付入力欄があったとします。

index.htmlの抜粋
<input type="date" name="start-date">
<input type="date" name="end-date" min="2019-05-01" max="2019-05-15">
<input type="date" name="other-date" min="2019-04-01" max="2019-05-15">

イメージ図: Image from Gyazo

罠1: <input type=date> は西暦275760年まで対応している

<input type="date" name="start-date"> に対して 20190523 という入力を行うと、 201905年02月03日 の入力になる。これは 20190523201905 が「年」、 2 が「月」、 3 が「日」として入力されるため。

Image from Gyazo

こういう入力フォームを持つページを puppeteer でなにかするようなスクリプトを書くとこの罠にはまる。西暦をゼロ埋めしてあげると思った通りの入力になります。

scraping.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('http://127.0.0.1/index.html');
  // 201905年2月3日になる
  await page.type('input[name="start-date"]', "2019-05-23");
  // ゼロ埋めしてあげると 2019年05月23日になる
  await page.type('input[name="start-date"]', "002019-05-23");
})()

罠2: Chrome の <input type=date>minmax を指定すると、年や月のセクションが入力不可になる可能性がある

<input type="date" name="end-date" min="2019-05-01" max="2019-05-15"> に対して 20190123 という入力を行うと、 2019年05月23日 になる。理由は以下の通り。

  1. minmax として 2019-05-01 から 2019-05-15 を指定しているため、「年」と「月」が 201905 月で固定されて入力を受け付けなくなっている
  2. 20190123 を入力すると、「日」のみがこの入力を受け取る
  3. 20190123 の最後の2つの数字(23)が「日」に入力される。これでも範囲外なのに!

Image from Gyazo

同様に、 <input type="date" name="other-date" min="2019-04-01" max="2019-05-15">20190123 という入力を行うと、 2019年02月23日 になる。 これは以下の理由による。

  1. minmax として 2019-04-01 から 2019-05-15 を指定しているため、「年」が 2019 年で固定されて入力を受け付けなくなっている
  2. 「月」と「日」が入力対象セクションになっているため、月に201901232 が入力される。
  3. 「月」に対して 2 を入力すると、その瞬間 2 月に確定される。
  4. 「日」に残りの 0190123が入力され、末尾の23が入力結果として反映される。

Image from Gyazo

Chrome を e2e テストで使うときは日付の入力に気をつけましょう

上記の例は puppeteer だけど、 Capybara とかでも Chrome を使ってると当然起こる。普段使うときはカレンダー型のUIを使うことが多いので、数字を直でタイプすると予想外の動きをする。

テストに使用したソースコードはこちら(gist)

oieioi
ハマったポイントをメモする。
https://oieioi.github.io/
tsukulink
建設業マッチングサイト「ツクリンク」の開発・運営
https://tsukulink.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした