Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

How to test Rich Text Editors with Hobbes?

Avatar

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
dorianhallward
Level 3

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
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
dorianhallward
Level 3

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
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
dorianhallward
Level 3

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
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

11-05-2018

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

Avatar

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
dorianhallward
Level 3

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
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

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
Level 2
kanchanm4209203
Level 2

Likes

0 likes

Total Posts

9 posts

Correct Reply

0 solutions
View profile

Avatar
Level 2
kanchanm4209203
Level 2

Likes

0 likes

Total Posts

9 posts

Correct Reply

0 solutions
View profile
kanchanm4209203
Level 2

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
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile

Avatar
Validate 1
Level 3
dorianhallward
Level 3

Likes

16 likes

Total Posts

71 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 10
Ignite 1
View profile
dorianhallward
Level 3

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