watir webdriver and extjs = split button click problem

[mndude]

I have a "split button" that when clicked in the middle or left side will perform a default action on that page.  But if clicked on the right side it will drop down a menu to select from a set of actions.  I can't get Watir webdriver to click and drop down the menu.  It only is able to click and perform the default action in the page.

There is a similar item at http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/kitchensink/index.html#basic-toolbar  Try the Menu Button drop down

The html of my button is somewhat similar to the link above and I'm having the same problem getting Watir webdriver to click on the right side and drop down the menu:

<td class="x-btn-mc">
    <em id="ext-gen49" class="x-btn-split" unselectable="on" style="background-color: transparent;">
        <button id="ext-gen22" class=" x-btn-text" type="button">Add</button>
    </em>
</td>


Is there a way to get Watir webdriver to click somewhere besides the middle of an object?  I wonder if I could click a few pixels to the right of center if the menu would appear. 

[Chuck van der Linden]

The button only occupies the left portion of the EM that holds it. The down arrow icon next to it is part of the container holding the button, so if you are clicking the little down arrow icon you are clicking on the EM or maybe the div/cell that holds the EM tag..  Maybe try clicking that instead of the button and see what happens? 

That could be a little tricky however since normally em is just a text formatting tag ('emphasis') and is not an element watir supports since this particular usage is well um er lets just say 'creative'.  So you might have to identify it as a generic element and use the class or ID to select it.  

You could also try clicking on the cell and see if that does anything for you.

If neither of those work then it might be time to talk to the ExtJS folks and ask them how to automate this darned control  (I'm pretty sure sikuli could do it if nothing else works)

[mndude]

Unfortunately the <em> takes up the same space as the button even though it sticks out a little bit on the right side.  So when clicking the <em> the click still happens in the middle and hits the button along the way.

A real mouse click on the right side works fine manually in the browser.  Can Watir "fine tune" the click position somehow?

[Chuck van der Linden]

I'd have to dig into the click code to be sure, but I could swear I've never seen any logic to find the center of the element etc, I think it's just firing events  (unless there is something way down inside webdriver)  If there is a way to do what you are asking, it's going to be down in the underlaying webdriver code, not up at the watir api layer.

[mndude]

In Firebug I can see events in the Console like "click clientX=359, clientY=304" being sent to .  Can these events be sent to a Watir element? 

This works correctly in my case to do the default button action:

irb> browser.em( :class => "x-btn-split" ).fire_event 'click'
=> false

But, if I substitute in what the Firebug console is showing me for a click in the correct place I get back "=> true" in irb and nothing happens in the browser:
irb> browser.em( :class => "x-btn-split" ).fire_event 'click clientX=359, clientY=304'
=> true

Is there a different syntax needed to send the event to the element with fire_event?

[mndude]

Maybe because I'm new to ruby I'm reading the API docs wrong but...

I'm looking at this page http://jarib.github.com/watir-webdriver/doc/Watir/Element.html#fire_event-instance_method

Where it says:

- (Object) fire_event(event_name, bubble = false)

[Hide source]

134 135 136 137 138

# File 'lib/watir-webdriver/elements/element.rb', line 134 def fire_event(event_name, bubble = false) assert_exists event_name = event_name.to_s.sub(/^on/, '') browserbot('triggerEvent', @element, event_name, bubble) end

But, if I try to execute fire_event with 2 arguments I get an error:

irb(main):013:0> button.fire_event( 'click', :true )
ArgumentError: wrong number of arguments (2 for 1)
        from C:/Ruby/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.5.5/lib/watir-webdriver/elements/element.rb:246:in `fire_event'
        from (irb):13
        from C:/Ruby/bin/irb:12:in `<main>'

[Chuck van der Linden]

your snippet is from lines 134-138 in element.rb   The error is originating on line 246

also I do not think 'click' is a valid eventname  I think you want 'onclick'  (although the code internally seems to strip the 'on' off so that may not matter, still as a matter of form I prefer the code someone is reading have event names that match what any javascript etc would tend to be looking for, just so it makes more sense to any developer who might not know the watir internals and is looking at my code trying to debug a problem or fix his or my bugs or something)

in addition to that, I'm not sure ':true' (a symbol since it starts with a colon) will automagically cast into a boolean, you may just want 'true' (sans quotes)

[mndude]

The snippet is direct from that API doc and seems to imply that I can pass 2 parameters in.  What does the error "ArgumentError: wrong number of arguments (2 for 1)" mean?  Is this just a bug in this API?

Once I've located a button, "button.fire_event 'click'" does work to click the button.  So does 'onclick' instead of 'click'.  I guess what is unclear to me is what exactly Watir's fire_event will take for the event_name parameter.  Is event_name something from Watir or is it what I can see when Firebug is logging events in the Firebug Console?  Or something else?

I can try to send 'onclick', 'true', but that gives the same error:

irb(main):015:0> button.fire_event 'onclick', 'true'

ArgumentError: wrong number of arguments (2 for 1)
        from C:/Ruby/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.5.5/lib/watir-webdriver/elements/element.rb:246:in `fir

_event'
        from (irb):15

        from C:/Ruby/bin/irb:12:in `<main>'

These are the Firebug events I'm talking about.

[Chuck van der Linden]

On Tuesday, May 1, 2012 12:03:07 PM UTC-7, mndude wrote:

The snippet is direct from that API doc and seems to imply that I can pass 2 parameters in.  What does the error "ArgumentError: wrong number of arguments (2 for 1)" mean?  Is this just a bug in this API?

Once I've located a button, "button.fire_event 'click'" does work to click the button.  So does 'onclick' instead of 'click'.  I guess what is unclear to me is what exactly Watir's fire_event will take for the event_name parameter.  Is event_name something from Watir or is it what I can see when Firebug is logging events in the Firebug Console?  Or something else?

I can try to send 'onclick', 'true', but that gives the same error:

irb(main):015:0> button.fire_event 'onclick', 'true'
ArgumentError: wrong number of arguments (2 for 1)
        from C:/Ruby/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.5.5/lib/watir-webdriver/elements/element.rb:246:in `fir
_event'
        from (irb):15
        from C:/Ruby/bin/irb:12:in `<main>'

These are the Firebug events I'm talking about.

You are looking at an old version of the repository, things have moved, you want https://github.com/watir/watir-webdriver  

I don't know what the 'bubble' parameter was doing, but it has been removed in the current code (which has that definition on line 246 as indicated by your error.  

     def fire_event(event_name)

      assert_exists
      event_name = event_name.to_s.sub(/^on/, '').downcase

      execute_atom :fireEvent, @element, event_name
    end

 

The events are a standard javascript thing, within the html  that's where the names are defined etc.  See :http://www.w3schools.com/tags/ref_eventattributes.asp for a list of the event names defined when HTML4 came out.

'true' is a string, the code fragment you provided below shows a Boolean being used, e.g.  true without quotes.  however since that second parameter is no longer in the current code it's pretty much not relevant either way

The error means that the code on the line indicated (which you did not look at) only accepts a single parameter and you provided two parameters, which makes perfect sense if you are looking at the code that is executing on your system and not an older version of the code.   (Where did you find that by the way, as I think we may need to update some links if there is something pointing you to the old watir-webdriver that started out under Jarib's github and has since moved under Watir to put everything in one place going forward. 

[mndude]

That API is linked from the https://github.com/watir/watir-webdriver link.  Scroll down to README.md for the link.  Is there a link to a more current version?

Also right at the top of the page at the new link is a link to the old one.  No wonder I'm confused.  Thanks for sorting that out. :)

I was trying to find out about that "bubble" and I think that is what lets the click through to a parent item.

[Chuck van der Linden]

We just recently relocated stuff all under Watir on github, looks like we failed to take into account the link in the readme.  I'll either figure out how to fix it myself and give them a pull request.  Long past time I learned to properly use GIT and how to contribute code (even if just a text file, or docs) to the project. 

[Alan Baird]

MN -

I've tangled with this control before.  ExtJS is lame because you have things like this button which doesn't have discrete HTML for all of it's elements (the button and the associated drop down).  You have two options, you can:

1) use the mouse to try and move the click point to the dropdown instead of the button (major PITA - but if you really want to do it you can start here: http://www.sencha.com/forum/showthread.php?56916-Testing-Ext-components-with-Ruby-WATIR)

2) use #execute_script to get a native ExtJS handle to the button and invoke the control you want (this is kind of cheating, but better than #1)

I wish I could tell you how to do #2 but since I left my previous job I no longer have access to the code.  If you have an ExtJS developer handy, I suggest you ask him or her how they would invoke this control in Javascript and then just execute that with the #execute_script method.  It basically involves instantiating a handle to the control and then finding ExtJS's method to invoke the drop down.

Let me know what you find out.

Alan

[Rams]

Hi,

I too have the similar problem with the split button and unable to click on the button. Find the below html source code and suggest me to proceed further.

<div id = "SearchButton">

   <table class="buttonMainTable" border="0" cellspacing="0" cellpadding="0">

     <tbody>

       <tr>

         <td class="buttonTDLeft">

         <td class="buttonTdMiddle" noWrap="nowrap">

               <input title="" class=SearchInputBox" id="Work_ID2" style="color: black;" onkeypress="searchWork(event);" onfocus="if(this.getAttribute('flag')

                <span class="yui-button yui-split-button" id="PEGA_SPLITBTNpyAdvFindOpt">

                   <span class="first-child">

                      <button tabIndex="0" title="Menu collapsed. Press Down Arrow to show the menu." type="button" PN=".pyAdvFindOpt"/>

          <td class="buttonTdRight">

Please refer the attachments (html source.png, split button.png, drop down.png) for more reference.