Component descriptions

Touch UI components breakdown

Each Touch UI component consist of two main properties: datapath and a class name (fully qualified) which is page object responsible for managing the component. These properties should be defined in component-descriptions.yaml configuration file (Bobcat expects the file in main/resources folder). You can find an example of such file below:

Image: 
    datapath: /image 
    clazz: com.project.pageobjects.components.Image
Title: 
    datapath: /title 
    clazz: com.project.pageobjects.components.Title
...
<human-readable key>
   datapath: <datapath of the component>
   clazz: <corresponding page object>

Data paths

Datapath in YAML component description is a HTML data-attribute of a component truncated after /jcr:content. You can omit underscore and id after it as the component description mechanism cuts them off (they are automatically by AEM for repeating elements).

Data Path

In this example Text component has the following data path:

data-path="/content/geometrixx-outdoors/en/toolbar/about-us/jcr:content/par/text_8d9e

In the YAML cofiguration file it can be provided like this:

data-path="/par/text"

Handling of multiple instances of the same component is a specific case and it is hard to provide a generic solution solving all different configurations. Thus, it is not supported and requires a custom implementation.

Component classes

Component class is a simple @PageObject annotated class that is responsible for managing the component, providing it's inner HTML for testing purposes etc. You can find very simple example of Text component below:

@PageObject
public class TextComponent {

  public static final String CSS = ".section.text.parbase";

  @Inject
  @CurrentScope
  private WebElement component;

  public String getOuterHTML() {
    return component.getAttribute(HtmlTags.Properties.OUTER_HTML);
  }

  public String getCssClassNameProperty() {
    return component.getAttribute(HtmlTags.Properties.CLASS_NAME);
  }

}