sendKeys to combobox, textbox or datefield (Selenium Web Driver + JUnit + ExtJS)

In my previous post Locate ExtJS Component (Selenium Web Driver + JUnit + ExtJS), I introduced some code snippets to find an ExtJS component using ComponentQuery. However, the elements located using that approach generally do not accept user input (except mouse click seems to work for button). Turns out ExtJS render these components using a lot of HTML markups wrapping around the real input element. The inputEl is usually the HTML element that accepts user input. So to send keys to them, a slight change is needed from the code I published in the previous post. We will need to drill down 1 level to retrieve HTML id of inputEl, and get its DOM element:

	//find the fully qualified component query of ExtJS component cmp
	String query = cmp.componentQuery;
	Component parent = cmp.parent;
	while (parent != null) {
	query = parent.componentQuery + " " + query;
	parent = parent.parent;
	}
	//use component query to find id of inputEl
	//the only change here is the addition of inputEl before .id
	String js = "return Ext.ComponentQuery.query(\"" + query + "\")[0].inputEl.id;";
	String id = (String) ((JavascriptExecutor) _driver).executeScript(js);
	WebElement element = driver.findElement(By.id(id));
	//Now, this web element accepts sendKeys
	element.sendKeys("it works");

view raw SendKeys.java hosted with ❤ by GitHub