Component configurer

The Dialog Configurer allows you to configure dialog fields with YAML configuration. There are some predefined field types, but you can write your own types if you want. At first let's take a look at the example of configuring Title component from Geometrixx site.

Example configuration

The title component has 2 configurable fields: Title and Size. We can configure it using this example YAML snippet:

titleSmall:
  Title:
    - type: TEXTFIELD
      label: Title
      value: test test test
    - type: SELECT
      label: Type / Size
      value: Small

The titleSmall key is used for obtain this particular configuration as there can be more of them. Just below there is a name of the component which is also a key of the appropriate component description. Below that there is a list of dialog fields we want to configure. In this example the Dialog Configurer will type into the text field value "test test test". The next dialog field is of type SELECT which is selecting an option from dropdown by visible text. In this case "Small" option will be chosen. When a dialog field has no label, we don't have to provide it. In such case the first dialog field of provided type will be matched as a subject for configuration.

Complex fields

Fields like multifield takes usually more than one value. There is a MULTIFIELD type defined in Bobcat which can be used:

...
Slides:
    - label: Slides
      type: MULTIFIELD
      value:
        - item:
            - label: Slide Name
              type: TEXTFIELD
              value: slide1
        - item:
            - label: Slide Name
              type: TEXTFIELD
              value: slide2
        - item:
            - label: Slide Name
              type: TEXTFIELD
              value: slide3

Usage in test implementation

To configure a component with desired configuration defined in YAML file, we need to use AuthorPage instance. At first we need to obtain a page from AuthorPageFactory

@Inject
private AuthorPageFactory authorPageFactory;

@Inject
private Pages pages;

private AuthorPage page;

private String parsys;

//...

  @Before
  public void before() {
    aemLogin.authorLogin();
    page = authorPageFactory.create(pages.getPath("testPage"));
    parsys = pages.getParsys("testPage");
    //...
   }
//...

We are obtaining a page from page definition which is defined in YAML file as well. In such definition there is parsys defined also which we can obtain using created page. Parsys is needed here to point where to put some component:

page.addComponent(parsys, "Text");

"Text" here is a name of the component visible in the component list. Now we can configure this component as shown below:

page.configureComponent(parsys, "Text", "titleSmall");

This will configure first component under selected parsys with configuration form YAML file of key titleSmall defined in the very first section of this tutorial.

Implementing custom dialog fields

You can implement your own dialog field by implementing DialogField interface. Let's take a look at the TEXTFIELD implementation as the example:

@PageObject
public class Textfield implements DialogField {

  @FindBy(css = ".coral-Textfield:not([type='hidden']")
  private WebElement input;

  @Override
  public void setValue(Object value) {
    input.clear();
    input.sendKeys(String.valueOf(value));
  }

  @Override
  public String getType() {
    return FieldType.TEXTFIELD.name();
  }
}

The code is very simple - setValue(Object value) method is managing the field and providing a value for it. In this example we are expecting value to be a String and typing it into the input WebElement which is being found by css selector. The getType() method returns a String which is used then in YAML configuration where we are providing type for a particular dialog field.

There is one more thing we need to care about - dialog field registration. If we want Bobcat to be aware of our Dialog Field we need to register it first. In order to do that we need to define our Guice module inside which we bind our Dialog Field implementation. This can lead as example:

import com.google.inject.AbstractModule;
import com.google.inject.multibindings.Multibinder;
import com.cognifide.qa.bb.aem.pageobjects.touchui.dialogfields.DialogField;

public class FieldsModule extends AbstractModule {

  @Override
  protected void configure() {
    Multibinder<DialogField> fieldsBinder = Multibinder.newSetBinder(binder(), DialogField.class);
    fieldsBinder.addBinding().to(TextField.class);
  }
//...
}