How do we handle jQuery autocomple with ATATA?

Question

Here is the input:

These are the results from predictive search

I could not find a better way to handle JQuery autocomple input in ATATA framework.

If I do without the framework, I could have done something like this

private IWebElement SchoolInput => _driver.FindElement(By.Id("autocomplete"));

public void SelectSchool(string school)
{

  // Wait for SchoolInput
  
  SchoolInput.SendKeys(school);
  SchoolInput.SendKeys(Keys.Delete) // Sometimes, results won't show, so need to delete last char
  
  // Now need to locate results div
  var searchResultsDiv = _driver.FindElement(By.Id("ui-id-1"));
  // Wait for searchResultDiv
  var expectedSchool = _driver.FindElement(By.Xpath($"//li[contains(text(),'{school}')]));
  // Wait for expected school
  expectedSchool.Click();

}

Answer 1

You can create custom Atata control class for jQuery UI Autocomplete this way:

[ControlDefinition("input", ContainingClass = "ui-autocomplete-input", ComponentTypeName = "autocomplete")]
public class JQAutocomplete<TOwner> : Input<string, TOwner>
    where TOwner : PageObject<TOwner>
{
    [FindByClass("ui-autocomplete", ScopeSource = ScopeSource.Page)]
    public UnorderedList<ListItem<TOwner>, TOwner> DropDownItems { get; private set; }

    public TOwner Select(string value)
    {
        Set(value);

        return DropDownItems[x => x.Content.Value.Contains(value)].Click();
    }
}

Then add it to your page object:

[FindById("autocomplete")]
public JQAutocomplete<_> School { get; private set; }

And finally use it in test:

page.School.Select("some value")

Here you can find working sample sources: https://github.com/atata-framework/atata-samples/tree/master/JQueryUI