Rich text

Rich Text component

RichText configuration

You may provide RichText configuration in your Feature File as with other dialog fields, for example:

Tab name	Field type	Field label	Value
Tab1	rich text	Rich Text	richtext

However, you may not use HTML tags in the value section. Why is that? The reason for this is how richtext component works. If you would type the raw HTML into RichText component, the HTML tags would be escaped and visible as text in the result.

Manipulating RichText content

The way for manipulating styling etc. is to use RichText controls in the dialog. Bobcat has predefined utilities for doing so. Let's say that we want to bold selected text and assume that this is the step implementation in which we want to do that:

@Test
public void richtextTest_makeTextBold() {
  aemRichText.type("xyz");
}

Now - if we want to make the "xyz" text bold we have to click a button responsible for that in the dialog window. RichText buttons

AemRichText class has click() method which takes RtButton as argument. RtButton is an enum with all buttons you can click in the RichText dialog:

BOLD
ITALIC
UNDERLINE
JUSTIFY_LEFT
JUSTIFY_CENTER
JUSTIFY_RIGHT
MODIFY_LINK
UNLINK
ANCHOR
BULLET_LIST
NUMBERED_LIST
OUTDENT
INDENT
REMOVE_STYLE

The buttons that are interesting for us in this case is BOLD. Here's how to click it:

aemRichText.click(RtButton.BOLD);

But this is not sufficient to make the text bold. While writing Bobcat test you have to put yourself in the position of a real person that would test that and proceed with the same steps as you would do while testing a functionality. So - what we've missed? When we want to make some text bold we need to select it first. You can do that as shown below:

aemRichText.selectText(0, 3);

We provide starting and ending index of the text we wan to to select - in this case entire "xyz" word. After that - when we click Bold button - text should be bold.

Ok, but how to check if the text is bold now?

There is a method for that can be useful here - AemRichText#getInnerHTML which returns the HTML of our richtext component - so when we want to check if the "xyz" is bold we need to check it against "xyz" text.

assertThat(aemRichText.getInnerHTML(), containsString("<p><b>xyz</b></p>"));

What is this  tag here for?

RichText component just wraps each line with paragraph tag, that's all.

Example test method

This is the general way to configure the richtext component in any way you want. The final test implementation can be found below:

@Test
public void richtextTest_makeTextBold() {
  aemRichText.type("xyz");
  aemRichText.selectText(0, 3); 
  aemRichText.click(RtButton.BOLD);
  assertThat(aemRichText.getInnerHTML(), containsString("<p><b>xyz</b></p>));
  aemDialog.ok();
}