FuelUX pillbox control - how to add tag elements via selenium

  • 1 Replies
  • 1183 Views
FuelUX pillbox control - how to add tag elements via selenium
« on: February 15, 2016, 18:45:05 pm »
I'm looking for a way to automate FuelUX's pillbox control, I am trying to add new tags to the pillbox.

http://getfuelux.com/javascript.html#pillbox

Code
<div id="pillboxIllustration" class="pillbox">
  <ul class="clearfix pill-group">
<li class="btn btn-default pill" data-value="foo">
<span>Item 1</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>
<li class="btn btn-default pill">
<span>Item 2</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>
<li class="btn btn-default pill" data-value="three-value">
<span>Item 3</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>
<li class="btn btn-default pill">
<span>Item 4</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>
<li class="btn btn-default pill">
<span>Item 5</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">

<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
</div>

It seems like in order to do that I would need to manipulate the DOM somehow? add an 'li' like this for example :
Code
<li class="btn btn-default pill">
<span>Item 6</span>
<span class="glyphicon glyphicon-close">
<span class="sr-only">Remove</span>
</span>
</li>

Is there a neat way to do this "html injection" ?

Re: FuelUX pillbox control - how to add tag elements via selenium
« Reply #1 on: February 16, 2016, 09:14:50 am »
You could achieve this via the FuelUX api methods while using JavaScript Executor for selenium.

Code
WebDriver driver = new FirefoxDriver();
jsExecuter = (JavascriptExecutor) driver;

String newItem = "My new item";
StringBuilder jsScriptToRun = new StringBuilder();

jsScriptToRun.append( "$('#pillboxIllustration').pillbox('addItems', [{ text: '" );
jsScriptToRun.append(newItem).append("' }])");

jsExecuter.executeScript(jsRun.toString());

Basically you will run addItems function of pillbox. it will add the 'li' to the DOM.
Code
$('#pillboxIllustration').pillbox('addItems', [{ text: 'My new item'}]); 
« Last Edit: February 16, 2016, 09:50:31 am by Jordan »

 

Sitemap 1 2 3 4 5 6 7 8