How to test Rich Text Editors with Hobbes?

[#1]

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? 

[#2]

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.

[#3]

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.

[#4]

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.

[#5]

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})

[#6]

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

[#7]

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)?

[#8]

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

[#9]

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

[#10]

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')