Multiple Selection Using Selenium Webdriver

Question

I want to simulate a multiple selection scenario using Selenium webdriver, so that the user is able to select Item 1 and Item 5 (see the URL) .

URL JQuery Selectable

Right now I am trying to do this using the clickAndHold function, but when I try, it selects all the other items in between the Item 1 and Item 5.

Right now this is happening

I want this

My code goes like this :

baseUrl="http://jqueryui.com/selectable/";
driver.get(baseUrl);
driver.switchTo().frame(0);
List<WebElement> list=driver.findElements(By.cssSelector("ol#selectable *"));
Actions act=new Actions(driver);

act.clickAndHold(list.get(0)).clickAndHold(list.get(4)).release().build().perform();

So the mouse is not released until it gets to the fifth item in the list, which probably is the reason for selection in between.

But If I try to not release the mouse click and select the fourth item, using this code

act.clickAndHold(list.get(0)).build().perform();
act.clickAndHold(list.get(4)).build().perform();

Then I'm getting the same output as the code above. What should I change here so the the items in between are not selected.

Answer 1

Since what you want is a more CTRL+click type of usage scenario, I'd recommend the following:

Actions actions = new Actions(driver)
actions.keyDown(Keys.CONTROL)
       .click(list.get(0))
       .click(list.get(4))
       .keyUp(Keys.CONTROL)
       .build();
       .perform();

While I've not tested this exact code, this should get you down the right path.

Answer 2

To select multiple options in the selectable:

List<WebElement> Selectable = driver.findElements(By.xpath("//*[@id='selectable']/*"));
Actions x = new Actions(driver);

x.keyDown(Keys.CONTROL)
 .click(Selectable.get(0))
 .click(Selectable.get(4))
 .keyUp(Keys.CONTROL)
 .build().perform();