Clicking an image inside the tinyMCE Editor with Watir-Webdriver

[Abe Heward]

Use Case: Using Watir-Webdriver, I need to access a menu that appears when clicking an image in the Content Body of the TinyMCE Editor. 

Problem: Clicking the image manually brings up the menu, but I haven't found a way to get it to happen with watir-webdriver. I've tried .click, .double_click, .fire_event("onclick")... I even tried doing some click-and-drag stuff using selenium code.

I know that watir-webdriver can "see" the image, because <image element>.present? returns "true". Also, none of the clicking events throw errors--they just don't bring up the context menu of the image, unfortunately.

I've also tried experimenting with some tinyMCE API calls but I get the error that "tinyMCE is not defined" so I'm obviously doing something wrong, fundamentally.

Has anyone tackled this problem, yet?

[Abe Heward]

One more thing I noticed: when I use .right_click on the image, the Browser's context menu appears in the upper left corner of the browser window, which implies that the click event is not occurring directly on the target image itself. I'm guessing that this is a requirement for tinyMCE to know to display the image's drop-down menu.

So, is there a way to control the exact spot where a watir-webdriver click action takes place?

[Jari Bakken]

can you demonstrate the problem on the public demo page?

http://www.tinymce.com/tryit/full.php

An example script against that page would make it easier to help. 

--
Before posting, please read http://watir.com/support. In short: search before you ask, be nice.
 
watir-...@googlegroups.com
http://groups.google.com/group/watir-general
watir-genera...@googlegroups.com

[Abe Heward]

Sure thing!

First, manually, go to that site and click on the tinyMCE logo in the editor. It will then look like this:

The particular thing to note is the resizing controller that appears--that's how you know you've clicked it.

Now, run this code:

require 'watir-webdriver'

browser = Watir::Browser.new :firefox

browser.goto "http://www.tinymce.com/tryit/full.php"

browser.frame(:id=>"content_ifr").image(:src=>"img/tlogo.png").click

sleep 10 # So that the window doesn't close immediately

You'll notice that the image-resize controller is not there after the click even occurs. That's the basic problem.

[Chuck van der Linden]

Thanks for the link to the demo, that helps immensely.

Unfortunately the 'real job' has been very busy lately as well as
'real life' and so I've not had a chance to look at this.

As an aside, unless you are working for the people who make this
editor, why test someone else's product? is that a good use of your
employers time? I'd do a fast review of the thing manually using ET,
and tell the dev team that you need to be notified if they update to a
new version of said product and retest at that time. Otherwise there
should be no changes to that code since it is 3rd party, and the value
of doing regression testing there should be minimal at best.

I'd investigate if it has some way to save/load files, and use that
functionality if you need to test that something 'created' in the
editor works correctly with the rest of your application.

On Jan 4, 9:24 am, Abe Heward <abe.hew...@gmail.com> wrote:
> Sure thing!
>
> First, manually, go to that site and click on the tinyMCE logo in the
> editor. It will then look like this:
>

> <https://lh5.googleusercontent.com/-qvTOc8b86gY/TwSKGqISs4I/AAAAAAAAAz...>

[Abe Heward]

"Why test someone else's product?"

I'm not. Unfortunately, however, the system being tested only provides one means of getting to a dialog box I need to get to, and that's via the tinyMCE Editor.  Here's the use case:

Ensure the user can modify the default address value of the Google Maps item on the page.

To accomplish the above, the user must:

1) Go to the page containing the maps widget.

2) "Edit" the page--which brings up the tinyMCE Editor.

3) Click on the "Google Maps" icon that now is sitting in the Content area of tinyMCE.

4) The click now brings up a context menu, with "Preferences" as one of the options. Click "Preferences".

5) Now a totally separate Javascript Pop Up dialog appears, which allows, among other things, setting the default address of the map.

If there were some other way of getting to that dialog on the page, I'd use it.

Sadly, what we're testing is a product that is an Open Source tool for the broader Higher Ed community, so there isn't a "development team" or project manager, per se, that I can go to and complain about their crappy UI.

[Abe Heward]

FYI, my temp solution is throwing some jquery in my methods. Fun fun.

[Chuck van der Linden]

You might have a look at Sikuli

I've used it for things like clicking on flash controls that were just
not exposed enough to work with via watir, autoit, or rautomation. It
may be a way to perform a few quick clicks based on looking for a
specific image on the screen, and then go back to working with watir
for those things that are more exposed.

Regarding that 'jspopup' be sure to check it using the development
tools (refresh them after it appears) as it may not be a popup at all,
but merely a div or other HTML element that is styled in such a way
that it looks and behaves much like a popup. I've been seeing more
and more of that sort of thing, and the good thing is that they are
easier to work with than true popups, once you recognize what is going
on.

[Abe Heward]

Chuck, Sikuli looks interesting, but it seems like a nightmare of overhead to use with Ruby, if this blog post is to be believed:

http://blackrat.org/ruby/getting-sikuli-script-working-with-jruby-on-the-mac/

I need to install Java, The Sikuli IDE, modify the $CLASSPATH, etc. etc.?!  Ugh. All because a click doesn't work on an object that properly "flashes" when I use .flash on it. Sigh.

[Chuck van der Linden]

well the only other thing I can suggest is a closer examination of the
editor and see if it is in fact reacting to the click, or maybe some
other action such as the mousedown. there may be a lot more going on
than meets the eye, and for things to work the mouse may need to be in
a specific position, perhaops for example to activate some kind of css
controlled psuedoclass etc. fancy controls like a full editor can be
pretty complicated under the covers sometimes. a bit of detective
work may be needed.

On Jan 8, 1:11 pm, Abe Heward <abe.hew...@gmail.com> wrote:
> Chuck, Sikuli looks interesting, but it seems like a nightmare of overhead
> to use with Ruby, if this blog post is to be believed:
>

> http://blackrat.org/ruby/getting-sikuli-script-working-with-jruby-on-...

[Super Kevy]

My work around on this control was to activate the Paste as Text
button (if its been enabled on your tinyMCE toolbar) then paste text
into the control.

Basically the text area of the tinyMCE control is really an iFrame and
it looks like javascript is doing a document write into it, I still
haven't found a really great way to test it other then manually.
However all the buttons in the tinyMCE toolbar have IDs which work
with the ie.link(how,what).click method, the paste popup then works
like normal html elements so you can get text into it which in turn
updates the RTF editor with content

> > when I use .flash on it. Sigh.- Hide quoted text -
>
> - Show quoted text -

[Abe Heward]

Alister's method, discussed here:

http://watirmelon.com/2011/08/12/automate-entering-text-into-wysiwyg-editors-using-watir-webdriver/

...works great, for me--with the exception of clicking on images in the editor's contents, as I've detailed.

Even jQuery hasn't been working for me, so I've got a meeting scheduled with a programmer and we may end up having to use some javascript to get it to work.