We are just learning Java/Selenium as our QA is moving towards automation. I am using Selenium 2 WebDriver for automation. There are some fields on a form that are multiple-select, auto-complete fields. Basically, you can type the beginning of something and the field will provide options that match, which you select and it gets added to the field. You can add as many items as you want (basically the same thing as the “tags” field for submitting this question). I am trying to delete an added item from this field, but cannot figure out the CSS path. Firebug shows the following HTML:
<div class="c4i-fieldDiv rel" style="min-height: 36px">
<div id="groupsDropdown" class="ui-autocomplete-multiple">
<ul class="ui-autocomplete-multiple-container ui-widget ui-inputfield ui-state-default ui-corner-all">
<li class="ui-autocomplete-token ui-state-active ui-corner-all" data-token-value="testGroup">
<span class="ui-autocomplete-token-label">testGroup</span>
<span class="ui-autocomplete-token-icon ui-icon ui-icon-close"></span>
The code I am using is:
WebElement deleteGroup = findElementBySelector("//div[@id='groupsDropdown']/ul/li/span");
deleteGroup.click();
this code worked to delete the third item added:
changing [3] to any other number that corresponds to an item in the field will work to delete that item.
IDE was not registering the [#] portion for some reason.