My test shows that webdriver fire_event("onmouseover") takes no effect when page has mootools lib.
when remove mootools lib, fire_event("onmouseover") takes effect.
how can I get a workaround?
html page is following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type='text/javascript' src='http://demos111.mootools.net/demos/mootools.svn.js'></script></head>
<body>
<div onmouseover="document.getElementById('id6').style.display='block';"
onmouseout="document.getElementById('id6').style.display='none';"
style="overflow:hidden;" id="id61" class="trbgcolor0">
<div style="height: 18px;">
<div style="float: left; ">
<b>plan category 2682</b>
<a class="unline"> add 1</a>
</div>
<div style="display: none;" id="id6">
| <a class="unline">edit 1</a>
| <a class="unline">delete</a>
</div>
</div>
</div>
</body>
</html>
watir is following:
require "rubygems"
require "watir-webdriver"
require 'test/unit'
class TC_article_example < Test::Unit::TestCase
def test_search
browser = Watir::Browser.new :firefox
browser.goto("http://192.168.88.120/mgt/login/t2.html")
sleep 1
oo = browser.div(:id=>"id61")
oo.fire_event "onmouseover"
puts "2 001 "
end
end
I'd be inclined to ask the mootools folks about this, offhand I'd guess it's somehow intercepting the event, so the browser element never really "see's" it when you fire it, but that's just a guess.
Their tools might also be adding some other kind of CSS logic or something else that governs if this item is hidden or visible, I've seen that a lot with rules that use a combination of element type and class along with the :hover psuedoclass to implement menus
For controls that use exclusively CSS to control the element visibility, I've not been able to find a way (yet) to cause a 'hover' state that is recognized at the browser level such that the CSS :hover rules take effect and cause the menu element(s) to appear.
The solution may be to force a change in the element's visibility by essentially executing the same script code that would fire via onmouseover and see if that makes the element show up.
browser.execute_script("document.getElementById('id6').style.display='block';")
If that does not work, you might be able to manipulate things at the CSS level by temporarily altering the particular style control. I've done this via Jquery (since our app already uses it) using this general format
browser.execute_script("jQuery('CSS-Rule-Name').css({display: 'block'});")
In my particular case the code to expose all the pulldown menus ends up looking like this
browser.execute_script("jQuery('.navigation #secondary_nav > li ul.tertiary_nav').css({display: 'block'});")
That would have to be adapted to your code of course, as the CSS rule will likely be different. The way I found the rule is to use the developer tools, select the container element for the menu in the dom, then chose 'trace styles' and expand the 'display' property which should give you the specific CSS rule (in my case it is .navigation #secondary_nav > li ul.tertiary_nav) that is controlling the display (usually 'none' or 'block') of the element. (there will be other similar rules with :hover added that take effect when the browser determines that the mouse is hovering over the applicable element )
Its a tiny bit of a kludge, but it does what is needed, which is make the menu item visible so you can then use things like the .click method on them.
If that action does not cause a page refresh, you can hide the menu again using the same script but setting it to 'none' instead of 'block'
a workaound is :browser.execute_script("abc(true)")
onmouseover="abc(true);"
onmouseout="abc(false)"
