How do I interact with a standard browser based date time picker component using the Atata framework?

Question

I need to get my atata script to set a date on my web form. The web form utlizes the tailwind css framework.

            DateTime t =  new DateTime(2024 ,02,17);

            Go.To<DatesClaimAreaEditPage>()
                // .EditHeading.Should.Contain("Edit Claim")
                .DateArea.Click()
                .EditIncidentDate.Click()
                .CurrentIncidentDate.Clear()
                .CurrentIncidentDate.Set(t)
                .Report.Screenshot()
                .EditIncidentAwareness.Click()
                .CurrentDateAware.Set(t)
                .CurrentDateAware.Click()
                .EditNatmedNotified.Click()
                .SaveReload.Should.BeVisible()
                .SaveReload.Click()
                .DateArea.Click()
                .Report.Screenshot();

This is the component I pick up when inspecting the web element oin my web broswer in dev tools:

code for the web element

I tried what you see in my method above. I defined my page object class like this:

 [FindByXPath("//*[@id='claimDates']/div[1]/div/editbutton/button")]
 public Button<_> EditIncidentDate { get; private set; }

 [FindByXPath("//*[@id='DateOfIncident']")]

 public DateInput<_> CurrentIncidentDate { get; private set; }

Should I make a custom component control for this particular date time picker?

Answer 1

So what is the problem with your current implementation? Does it throw an exception or what?

Right, DateInput is the right Atata control to choose when dealing with standard input[type="date"].

Note that DateInput component supports formatting. The default format is "d" (short date pattern, e.g., 6/15/2009). If your date format differs, add [Format("{custom_format}")] attribute to your date input property.

Few other recommendations:

1. Prepend XPaths like "//*[@id='DateOfIncident']" with . to have ".//{...}".
2. Instead of [FindByXPath("//*[@id='DateOfIncident']")] use [FindById("DateOfIncident")].
3. No need to call Clear method before Set like here: .CurrentIncidentDate.Clear().CurrentIncidentDate.Set(t). Set method clears and then types the new text. When you don't want to clear input before typing, use Type method.