Unable to Identify & perform action on Combobox (Sproutcore) using Selenium Webdriver:Ruby

Question

I have the below HTML for an element on the page. It is of type combobox-view and list is dynamic

<div id="sender-combobox" class="sc-view scui-combobox-view sc-regular-size" style="left: 0px; right: 0px; top: 26px; height: 24px">
  <div id="sc14188" class="sc-view sc-button-view icon square sc-regular-size" style="right: 0px; width: 28px; top: 0px; height: 24px" role="button" alt="" title="">
    <span class="sc-button-inner" style="min-width:80px">
      <label class="sc-button-label ellipsis">
        <img class="caret" alt="" src="data:image/gif;base64,R0lGODlhAQABAJAAAP///wAAACH5BAUQAAAALAAAAAABAAEAAAICBAEAOw==">
      </label>
    </span>
  </div>

  <label id="sc14190" class="sc-view sc-text-field-view oldWebKitFieldPadding sc-hint sc-regular-size" style="left: 0px; right: 28px; top: 0px; height: 22px">
    <span class="border"></span>
      <span class="padding">
        <input class="field" type="text" maxlength="5096" spellcheck="false" placeholder="Set Default Username" value="Set Default Username" name="sc14190">
      </span>
  </label>
</div>

Now i am trying to select an item from combo box by declaring the element as select_list and using Select method from (http://www.rubydoc.info/github/cheezy/page-object/PageObject/Platforms/SeleniumWebDriver/SelectList#select-instance_method).

select_list(:default_sender, {xpath: "//div[@id='sender-combobox']/div/span/label/img"})

default_sender_element.Select('User1')

I get an error that there is no Select method. I am unable to figure out the reason: is it because of element type not being a combo box and hence Select method is not working?

fyi..I included 'selenium-webdriver'in my file.

As another approach, i declared the combox as two different items (Search box + button) and tried to enter text by using send_keys(value), search will give the result. But i am not able to click the result.

I am stuck at this point. Any help or direction is appreciated.

Answer 1

The sample code you provided does not have any select elements, so you cannot access them with select_list. Which is exactly what the error is telling you.

It is of type combobox-view

No it is not, as there is no such type defined in the HTML standard!

You will need to access everything with clicks. The page is probably going to be dynamically built, so you will have to refresh your locators after every click. Have a look at this post for a very similar problem.

Answer 2

The problem is that you (or selenium) are trying to treat SproutCore controls like HTML controls. SC lives in JavaScript, with a thick view layer standing between you and the HTML. In the example of the SCUI combo box, according to here, you would call myView.showList() -- on the JavaScript view object, not on the HTML element.

Since SproutCore lives in JavaScript, you would very rarely find the view object by looking at the HTML, as that is considered profoundly hackish. However, if you have a good reason (or no other option), you can access a view by its ID, which is the same as the ID on the element. The HTML that you included above indicates that the ComboBox's ID is 'sender-combobox' (which means it's been customized with layerId, which is a bad idea); you can find that view at SC.View.views['sender-combobox']. Again, this is considered a bad idea.

Note that if you're running code yourself, e.g. from the console, or from any other source that isn't SC responding to a user event like a click, then you need to trigger a run loop by calling SC.run with a function. Otherwise SproutCore's bindings and observers may not catch up, or may behave unpredictably until the next user event.

So in conclusion, to pop open this view's dropdown, you could use:

SC.run(function() { SC.View.views['sender-combobox'].showList(); });

(but don't forget that it would be better to access SC.View.views['sender-combobox'] some other way).