[puppeteer]input type=dateへの入力

puppeteerを使った自動テストを導入しているんですが、その中で困ったのが日付の入力。<input id="inputdate" type="date">へのタイプです。

最近のtype="date"

最近のブラウザは便利で、dateを指定するとカレンダーでの入力ができたり、年月日を区別して入力できたりします。

こういったUI、人間にはとても便利なんですが、puppeteerはご機嫌を損ねます。普通にtypeで入力すると…

2019-05-06とtypeしたのですが…とんでもない未来にタイプスリップしてしまいました。

puppeteerのコードはこんな感じ。

await page.type(cssid, "2019-05-06");

puppeteerでdateのinputに入力する方法

今回使ったトリックは「右矢印で月、日の欄に移動」というものです。

const cssid = "input#testdate";

const y = "2019";
const m = "05";
const d = "06";

// まず年をtypeして…
await page.type(cssid, y);
// ここがキモ。右矢印押すことで、月の欄に移動します。
await page.keyboard.press('ArrowRight');
// 次は月
await page.type(cssid, m);
// 日の欄に移動します。
await page.keyboard.press('ArrowRight');
// 最後に日
await page.type(cssid, d);

こうすることでいい感じに入力できます。