Selenium testing with FlatPickr

Viewed 282

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

0 Answers
Related