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?
smacdonald2008
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.
smacdonald2008
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.
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 tests 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.
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})
smacdonald2008
smacdonald2008
11-05-2018
You should write up a word doc and we can publish it and credit you. Excellent work!
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)?
smacdonald2008
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.
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
dorianhallward
dorianhallward
19-08-2019
kanchanm42092031hi 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')