How to test Rich Text Editors with Hobbes?

Avatar

Avatar

dorianhallward

Avatar

dorianhallward

dorianhallward

24-04-2018

Hi,

I'm writing some automated tests to simulate interaction with customised authoring dialogues, using hobbes.js.

Hobbes gives me nice functions that I can chain together like click(...) and fillInput(...) these work Ok for most input fields, but I'm not sure how to do similar for an OOTB Rich Text Editor.  There is a lot of event raising and handling which seem to prevent the Hobbes function working (should I be able to use hobs.actions.core.fillInput(...) with an RTE?) .   I'm not sure which part of the DOM to target to set input for an RTE: the HTML includes a div.coral-RichText-editable, which has a child <p> elemtn that holds the supplied text values; but there is also a sibling (hidden) <textarea>.

I'm hoping filling in the contents of a rich text area - via an automated test - is reasonably straightforward, for example by creating jquery focus/key up/key press etc events and using jquery's .trigger function.

Can anybody help? 

Replies

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

24-04-2018

I have heard ppl testing Java code, front end HTL, etc - but never granite types. I am checking internally to see if anyone performed this.

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

24-04-2018

Out Touch UI ppl have never attempted this. They stated -- "RTE is too complicated to perform automated tests…."

I am not sure this is a common use case that ppl have written about. I am still searching for community content that can help you.

Avatar

Avatar

dorianhallward

Avatar

dorianhallward

dorianhallward

25-04-2018

Thanks for making enquiries smacdonald2008

I'm working sequentially through building out unit tests /integration tests/ (and now with Hobbes) regression test​s to support the custom components (and authoring dialogues) we are writing.  I agree the RTE is complicated.  Hopefully it's been the subject of enough  customisation and enhancement that there is some advice out there (somewhere!) around how to drive an automated, from-the-browser test for it with Selenium or Hobbes or whatever.  If that advice can be shared it would be greatly appreciated.

Avatar

Avatar

dorianhallward

Avatar

dorianhallward

dorianhallward

11-05-2018

Turns out this is reasonably straightforward, using the execFct function, something along the lines of,

.execFct(function(){

    var rte = hobs.find('div.coral-RichText-editable'),

        rte_p = rte.find(' > p'), rte_br = rte_p.find(' > br'),

        rte_container = hobs.find('div.richtext-container > input.coral-Form-field.coral-Textfield');

    // delete br

    rte_br.remove();

    //append copy (for visual effect)

    rte_p.append(hobs.param("testLoremIpsum")());

    //add copy to the hidden field that posts the data into the backend (first matching element used)

    rte_container.attr("value", hobs.param("testLoremIpsum")());

}, {delayAfter: 2000})

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

11-05-2018

You should write up a word doc and we can publish it and credit you. Excellent work!

Avatar

Avatar

dorianhallward

Avatar

dorianhallward

dorianhallward

15-05-2018

smacdonald2008​ thanks I would be happy to do that.  I will dust off my prose

Do articles need to be in word format specifically? And is there a preferred content structure (sorry no puns intended)?

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

15-05-2018

Just use a basic WOrd doc and include headers, etc You can email me scottm@adobe.com if you have more questions.

Avatar

Avatar

kanchanm4209203

Avatar

kanchanm4209203

kanchanm4209203

10-07-2019

Hi, am stuck in the same step, i used the above mentioned method, did not help in adding a context to RTE. Can you please help ?

Thanks,

Kanchan

Avatar

Avatar

dorianhallward

Avatar

dorianhallward

dorianhallward

19-08-2019

kanchanm42092031​hi we found this was just a case of getting the CSS selectors right.  If you are still looking into this would you be happy to share a snippet of your html markup and the hobbes.js scripts you are using to test it?  (I'm not sure what you mean by 'context')