C# Selenium - How do I automate a flatpickr date picker - getting the can't interact error

Question

How do I click days on this date picker?

This date picker modal is not in an IFrame so I can't use .switchTo() because there's no frame to switch. The control is independent of the page so that it slides and remains in view when the user scrolls up or down.

IWebElement item = driver.FindElement(By.CssSelector(".flatpickr-day[aria-label='May 26, 2021']"));

This code does return an item, but item.Click(); throws the ElementNotInteractable exception.

Here is the control as it appears in the DOM:

<div class="flatpickr-calendar animate arrowTop open" tabindex="-1" style="top: 390.479px; left: 118.396px; right: auto;">
  <div class="flatpickr-months">
    <div class="flatpickr-month">
      <div class="flatpickr-current-month">
        <span class="cur-month">May </span>
        <div class="numInputWrapper">
          <input class="numInput cur-year" type="text" pattern="\d*" tabindex="-1" aria-label="Year" data-min="2021" data-max="2021" disabled="">
          <span class="arrowUp"></span>
          <span class="arrowDown"></span>
        </div>
      </div>
    </div>
    <span class="flatpickr-next-month">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17">
        <g></g>
        <path d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z"></path>
      </svg>
    </span>
  </div>
  <div class="flatpickr-innerContainer">
    <div class="flatpickr-rContainer">
      <div class="flatpickr-weekdays">
        <div class="flatpickr-weekdaycontainer">
          <span class="flatpickr-weekday">Sun</span>
          <span class="flatpickr-weekday">Mon</span>
          <span class="flatpickr-weekday">Tue</span>
          <span class="flatpickr-weekday">Wed</span>
          <span class="flatpickr-weekday">Thu</span>
          <span class="flatpickr-weekday">Fri</span>
          <span class="flatpickr-weekday">Sat</span>
        </div>
      </div>
      <div class="flatpickr-days" tabindex="-1">
        <div class="dayContainer">
          <span class="flatpickr-day prevMonthDay disabled" aria-label="April 25, 2021">25</span>
          <span class="flatpickr-day prevMonthDay disabled" aria-label="April 26, 2021">26</span>
          <span class="flatpickr-day prevMonthDay disabled" aria-label="April 27, 2021">27</span>
          <span class="flatpickr-day prevMonthDay disabled" aria-label="April 28, 2021">28</span>
          <span class="flatpickr-day prevMonthDay disabled" aria-label="April 29, 2021">29</span>
          <span class="flatpickr-day prevMonthDay disabled" aria-label="April 30, 2021">30</span>
          <span class="flatpickr-day disabled" aria-label="May 26, 2021">26</span>
          <span class="flatpickr-day today" aria-label="May 27, 2021" aria-current="date" tabindex="-1">27</span>
          <span class="flatpickr-day " aria-label="May 28, 2021" tabindex="-1">28</span>
          <span class="flatpickr-day " aria-label="May 29, 2021" tabindex="-1">29</span>
          <span class="flatpickr-day " aria-label="May 30, 2021" tabindex="-1">30</span>
          <span class="flatpickr-day " aria-label="May 31, 2021" tabindex="-1">31</span>
          <span class="flatpickr-day nextMonthDay" aria-label="June 1, 2021" tabindex="-1">1</span>
          <span class="flatpickr-day nextMonthDay" aria-label="June 2, 2021" tabindex="-1">2</span>
          <span class="flatpickr-day nextMonthDay" aria-label="June 3, 2021" tabindex="-1">3</span>
          <span class="flatpickr-day nextMonthDay" aria-label="June 4, 2021" tabindex="-1">4</span>
          <span class="flatpickr-day nextMonthDay" aria-label="June 5, 2021" tabindex="-1">5</span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

You will need to use an explicit wait before clicking the element. Sometimes Selenium executes faster than JavaScript on the web page executes, especially if visual effects like fading in or fading out are occurring.

var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(30));
var locator = By.CssSelector(".flatpickr-day[aria-label='May 26, 2021']");
var item = wait.Until(ExpectedConditions.ElementToBeClickable(locator));

item.Click();