datetime-local E2E
The current post is a future reminder for myself (and a way to share some knowledge of course). Some time ago I started a pet project to improve my JavaScript in the backend (or node.js to be more precise). In this project I wanted users to input a date and a time to create a schedule.
The UI was as simple as an input to type an event name, and another to type a datetime. So… I used the native HTML input type datetime-local.
This looked to be an easy solution. I actually tested it, using the click feature which shows a “beautiful” calendar to pick a date and then typing a specific time manually. So far so good, right? Well yes, until I did some E2E tests!
For E2E I used Puppeteer, “a Node library which provides a high-level API to control Chrome or Chromium” that allowed me to load my website, navigate to that schedule creator and create a new one. Everything was going smooth until filling the datetime input. I was doing it using text typing with something like “060820202233” which in my mind would reproduce the following: 08-June-2020 22:33… But I was wrong! My backend kept saying the datetime was invalid!
Puppeteer has a feature that allows it to hide the browser when performing tests. This is called the headless browser. We can set this feature to false to be able to see the browser while the tests are running. And that was what I did to watch it fail.
My tests were creating the following datetime: 08-June-202022 33: --… 202022?? Really?? Are the guys who created this input type expecting humankind to be using browsers in the year 10.000?? I hope not.
The browser was using the hours digits to fill a 6-digits year. So my assumption was “This is a format problem, of course!”. I tried to input “06-08-2022 22:33”. Guess what? Same result! But why?, I kept thinking… (you can test it yourself in the input that I provided above).
Well, I'm not disclosing how long I kept trying different text inputs until I got the browser in front of me, and tried to type it myself (and that should have been my first approach). Findings?? This type of input can have until 6-digit years and to bypass it with only 4-digits, to start typing the hours and minutes, the user needs to do a RIGHT-ARROW click. And so does Puppeteer!!
So I ended up with the following code:
page = await browser.newPage() // Open a new Chromium page
await page.goto('http://localhost:3020') // Navigate to my website
await page.type('input[type="datetime-local"]', '06082019') // Find input and type date
await page.keyboard.press('ArrowRight'); // Press RIGHT-ARROW
await page.type('input[type="datetime-local"]', '2233') // Find input and type time
I know this is not the most informative post ever but,
Hope you enjoyed it.