In Watir, how can I interact with an element that is initially "hidden?"

Question

I'm trying to test a page containing an element that, when the page is first opened, has its style= attribute set to display: none;. In Firefox, when the test interacts with the page (two text fields, for now), the button is enabled, and can be clicked programmatically. In IE8, however, the button cannot be clicked if the page has been interacted with by the test, even if I try to manually click it. This is what the code looks like:

<a tabindex="21" onclick="if(!allow_submit() || nextStepLocked()){return false;};; new Ajax.Request(saveInfo); return false;" id="nextStepButton" href="#" class="nextButton" style="display: none;">
    <img src="/btn_next_step.png" alt="Btn_next_step">
</a>
<img style="" src="/btn_next_step.png?" id="hiddenNextStepButton" class="nextButton" alt="Btn_next_step">

There's a similar block on the page that leads to this one, and I was able to click it just fine with the code browser.image(:alt => "Btn_next_step").click. I also noticed that when the image switches from a non-clickable to a clickable state, it moves up a few pixels; if I trigger the clickable state in code, this same movement occurs, but the button does not become clickable.

So far, I have tried using AutoIt to mimic the actions normally taken on the page, and I have also tried many different ways of interacting with the image, such as referencing different indices, using multiple identification methods at once, and so on. I even tried messing around in irb, but to no avail.

Update:

I checked the input fields, and they do indeed respond to onchange events, but only to capitalize the first letter of the text you enter. Since the button seems to work if I do just about anything on the page, I looked through the entire source and found the following at the end of the page:

<script>
    document.onkeydown=function(e){
        accession_hotkeys(e);
    };
</script>

I'm not sure how to properly fire this event, though. Doing it on any specific element doesn't seem to have an effect.

Answer 1

This would be a comment, but I don't have the rep yet. If you can click it without WATiR then you can click it with WATiR using a top-level hardware click, using the code here. If not, please disregard this answer.

The code is useful anyway, it does an actual mouse click at the highest level, using the mouse pointer. If you cannot interact with it in WATiR, and you cannot interact with it without then I'd say you're better off with Dave's answer than mine.

Answer 2

Rather than trying to figure out what javascript you have to invoke, or settings you have to manipulate, I'd suggest trying to see what is needed to have that happen 'naturally' ala a human interacting with the site. Have a good look at the HTML for your input fields to see if they are wired to fire off javascript scripts when some event fires (I'd suspect 'onchange')

Firewatir and Watir are not derived from a common code base (more like sorta merged after the fact), and it could well be that firewatir is setting off those events when the field is set, but watir is not. The other possibility is that the firewatir code could be just enough slower that as it goes to click the button, the client side code was able to alter the state of the button, while that has yet to happen on the IE side.

What might be required is for you to fire a specific event against the input element after you have .set the value the way you want it. Again, I suspect it will be 'onchange' but cannot be sure without seeing your html.

The other thing you may need to do is be sure the code is waiting long enough for any client side scripting to make changes, so I'd suggest perhaps trying a one second sleep prior to trying to click the button.

Normally I troubleshoot stuff like this using an IRB session as it lets me do things like set values, fire events, at my own pace, and I can examine the state of the page after I've done each thing. For example fire an event at an element and see how the page 'responds' in turn. (which is just dammed hard to do at 'script speed'). Also if things work in IRB but not when the exact same code is executed as a script, the problem is almost always that the scripts are doing things 'too fast' and you need to insert a few delays to allow the client side code to do it's thing in between specific script steps.

Answer 3

My guess is that you have to find which JavaScript event to fire: How to find out which JavaScript events fired?

Answer 4

Another shot in the dark, since it appears to be looking for any kind of 'keydown' event on the entire document.. I wonder if

browser.fireEvent(onkeydown)

would work?