I am trying to write functional tests for a Vue form that benefits from the FlatPickr date control. When I click on the element, it shows an additional element and from this the calendar appears. I'm struggling to select the input to activate the drop down.
<flat-pickr id="DateOfBirth" v-model="request.name.dateofbirth" :config="config" class="form-control" placeholder="Select date" name="date" size="sm" aria-label="Your date of birth">
</flat-pickr>
I don't really care what date is selected and so far I have tried this to just select the 3rd day/date but the calendar doesn't show:
var datePickr = webDriver.FindElement(By.XPath("//input[@placeholder='Select date']"));
var jsExecutor = (IJavaScriptExecutor)webDriver;
jsExecutor.ExecuteScript("arguments[0].setAttribute(arguments[1], arguments[2]);", datePickr, "readonly", "");
datePickr.Click();
var days = webDriver.FindElements(By.ClassName("flatpickr-day "));
days[3].Click();
The objective is to find the element, click it, select any date.
NB: if I try
var datePickr = webDriver.FindElement(By.Id("DateOfBirth"));
Then the expression fails as this element is hidden when rendered and something else triggers it (hidden by FlatPickr, not my code).
Any ideas? Thanks