{"id":1345,"date":"2010-05-11T20:40:15","date_gmt":"2010-05-12T03:40:15","guid":{"rendered":"https:\/\/mathpirate.net\/log\/?p=1345"},"modified":"2010-05-11T20:42:32","modified_gmt":"2010-05-12T03:42:32","slug":"automated-testing-and-tinymce","status":"publish","type":"post","link":"https:\/\/mathpirate.net\/log\/2010\/05\/11\/automated-testing-and-tinymce\/","title":{"rendered":"Automated Testing and TinyMCE"},"content":{"rendered":"

<\/a><\/p>\n

\"\"<\/a><\/p>\n

Ever come across one of these TinyMCE editors in the stuff you have to test?\u00c2\u00a0 Well, it\u00e2\u20ac\u2122s probably going to give you a headache when you do.\u00c2\u00a0 There\u00e2\u20ac\u2122s a <textarea> in the page, and normally, you\u00e2\u20ac\u2122d grab the element, set its value, and call it good.<\/p>\n

Not here.<\/p>\n

You see\u00e2\u20ac\u00a6\u00c2\u00a0 TinyMCE doesn\u00e2\u20ac\u2122t use content of the text area.\u00c2\u00a0 Instead, it seems to be dynamically building an HTML document within an <iframe> and the text area is just there to be a placeholder.\u00c2\u00a0 Now, I\u00e2\u20ac\u2122m sure that if you really wanted to, you can probably\u00c2\u00a0manipulate the HTML document in that <iframe>, but if you want to do that, there\u00e2\u20ac\u2122s probably something wrong with you.\u00c2\u00a0 Fortunately, there\u00e2\u20ac\u2122s a better way.<\/p>\n

TinyMCE has a JavaScript API.\u00c2\u00a0 (Details here\u00e2\u20ac\u00a6<\/a>)\u00c2\u00a0 This API lets you do all sorts of crazy things when you\u00e2\u20ac\u2122re developing a page with a TinyMCE editor on it.\u00c2\u00a0 Of course, we\u00e2\u20ac\u2122re not developing the page, but fortunately, the TinyMCE editor doesn\u00e2\u20ac\u2122t know that.\u00c2\u00a0 JavaScript called from the test is just as valid as JavaScript called from the page in its view, so we can call the function to insert text into the document.\u00c2\u00a0 Like so:<\/p>\n

window.tinyMCE.execCommand(‘mceInsertContent’,false,’contentHTML<\/em><\/strong>‘);<\/p>\n

where \u00e2\u20ac\u0153contentHTML\u00e2\u20ac\u009d is the stuff you want to insert.<\/p>\n

I’m assuming that all you have to do is insert a bit of content into the editor field, much like it were a regular text input box.\u00c2\u00a0 If you have to do more in depth testing of various TinyMCE controls, you’re either testing the wrong thing (the editor instead of your app), or you’re on the dev team for TinyMCE, in which case you shouldn’t be reading my blog post on this subject, you should be writing your own explaining this so that outside testers don’t waste the better part of their day to figure this sort of stuff out.<\/p>\n

Now, as far as how to actually call JavaScript code when you’re automating the browser through the DOM…\u00c2\u00a0 I thought I’d written something about that before, but now I can’t seem to find it.\u00c2\u00a0 I guess that’ll have to be a topic for the future.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ever come across one of these TinyMCE editors in the stuff you have to test?\u00c2\u00a0 Well, it\u00e2\u20ac\u2122s probably going to give you a headache when you do.\u00c2\u00a0 There\u00e2\u20ac\u2122s a <textarea> in the page, and normally, you\u00e2\u20ac\u2122d grab the element, set its value, and call it good. Not here. You see\u00e2\u20ac\u00a6\u00c2\u00a0 TinyMCE doesn\u00e2\u20ac\u2122t use content of […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7,34],"tags":[56,111,142,141,36,140],"_links":{"self":[{"href":"https:\/\/mathpirate.net\/log\/wp-json\/wp\/v2\/posts\/1345"}],"collection":[{"href":"https:\/\/mathpirate.net\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mathpirate.net\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mathpirate.net\/log\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mathpirate.net\/log\/wp-json\/wp\/v2\/comments?post=1345"}],"version-history":[{"count":2,"href":"https:\/\/mathpirate.net\/log\/wp-json\/wp\/v2\/posts\/1345\/revisions"}],"predecessor-version":[{"id":1349,"href":"https:\/\/mathpirate.net\/log\/wp-json\/wp\/v2\/posts\/1345\/revisions\/1349"}],"wp:attachment":[{"href":"https:\/\/mathpirate.net\/log\/wp-json\/wp\/v2\/media?parent=1345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mathpirate.net\/log\/wp-json\/wp\/v2\/categories?post=1345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mathpirate.net\/log\/wp-json\/wp\/v2\/tags?post=1345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}