How to provide custom find / object pairs - @FindBy/WebElementFacade and By/Target

[Tony Tubbs]

I'm trying to integrate Serenity with some existing ExtJs based applications.  I would make things much simpler/cleaner for us if we could somehow plugin in some custom support for working with ExtJs that mesh better with Serenity and Selenium. I would like for our teams to be able to write code like the snippets below, how can we achieve that?

PageObject

@FindBy(itemId="#userId")
private MyWebElement userId;

Screenplay

public static final MyTarget USERNAME_FIELD = the( "username field" ).located( By.itemId( "#userId" ) );

I am too new to this to understand yet if and how it matters, but I'm thinking I'll need a custom WebElement(Facade) and Target because I'll need to override things to do it the ExtJs way.  That is, I'll need to be able to access the value of the itemId in these custom classes and use that to execute some JavaScript in type(), sendKeys(), click(), whatever...

Eg:

((JavascriptExecutor)driver).executeScript( "return Ext.ComponentQuery.query('" + itemId + "')[0].isVisible();");

Thanks

[adi....@outlook.com]

Unless the application implements different actions then the standard html actions normal web element interactions should be enough. If the elements you interact with are HTML elements a standard WebElement / WebElementFacade can be used to store a reference to it. So as far as I see it (I just checked out some minimal info on ExtJs as I have never used it/ had interactions with it) your biggest hurdle is actually selecting the item.

As for item selection (Finds) you can use standard selectors like id, css or even xpath if the items are HTML elements. You can find stuff using xpath - which I actually hate and find hard to work with, read and maintain especially in apps generated by frameworks like ExtJS or AngularJs. The best alternative for me and the one thing that improved my selectors the most is the advanced cssSelectors: https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/

In your case you could get the css of the element you want and use the advanced selectors to uniquely identify the item. Let's suppose that the css of the element is "label". You can alway restrict the find to:

@FindBy(css = "label[itemId=\"#userId\"]")

WebElementFacade myElement;

or inside methods like:

find(By.cssSelector("label[itemId='#userId']").click(); 

If this does not help maybe post a snippet of code from the sources of page you are trying to test.