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.

score 1 · Answer 1 · answered Jul 03 '14 at 21:06

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).

Why is defining an ID on the SC view considered bad? Could you elaborate a bit? — Topher Fangio, Jul 05 '14 at 17:01
Well I should say instead that it's a very common source of error. Views often start out as singletons but get turned into classes later on; if a developer isn't aware or has forgotten that there are layerIds scattered around, it causes some very hard-to-diagnose issues. There's a generally unquantified performance boost to styling with IDs rather than classes, but it has to be done very carefully and consistently, and in very loud coordination with your entire team, present and future. I generally recommend against it. — Dave, Jul 06 '14 at 15:01

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

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.

edited May 23 '17 at 11:51

Community

1
1

answered Jul 01 '14 at 18:57

SiKing

10,003
10
39
90

How can i identify in HTML if its a select element? Also you mentioned about clicks. I tried to click the button, now i need to select an item from the list. Are you trying to say that i need to get all elements in that pane in a hash and go through each hash item and click when it matches my value? – Ratnakar Jul 01 '14 at 19:11
Select element is identified with the `select` node: http://www.w3.org/TR/html4/interact/forms.html#edef-SELECT Iterating over all the elements after the click is one option. Remember: Selenium simulates the actions of a human user, so how would a human user do it? – SiKing Jul 01 '14 at 19:18

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

2 Answers2