Question: How to handle complex web components like custom grids, fancy dropdowns etc. #2791

Hi!

Complex custom made components are quite common in modern web apps. I'm looking for a way to encapsulate logic of such component and reuse it in my page objects (e.g. a custom grid component used across entire app). Is there some kind of component support in Serenity or certain way of dealing with this kind reuseable web elements? Maybe I should simply try to extend some existing class like WebElementFacade? I still want to ask this question because i prefer to clarify that and avoid reinventing the wheel...

This is how I imagine use of such component:

 public class FancyGridComponent {

      @FindBy(id="grid-row-counter")
      WebElementFacade rowCountLabel;

      public int getRowCount(){
          return Integer.parseInt(rowCountLabel.getText());
      }

      public void sortByColumn(String columnName){
            ...
      }

}

Use of component in page object

public class MyPageWithGrid extends PageObject {

    @FindBy(id="gridWithImportantStuff")
    FancyGridComponent grid;

    public int getNumberOfOrders(){
        return grid.getRowCount()
    }

}

Some remarks regarding snippet above:

1. I would like to be able to create instances of my component using FindBy annotation - just like it's done for regular WebElementFacade
2. I would like to be able to use FindBy inside component class to identify internals of my component as child elements of the instance.
3. It would be good to be able to nest components inside components (e.g. when we have a customer grid that uses custom dropdowns as filters and same dropdowns are used across the app)

Thanks Luke