Software Testing: Webdriver SELECT Methods to work with Dropdowns

WebDriver’s support classes called “Select”, which provides useful methods for interacting with select options. User can perform operations on a select dropdown and also de-select operation using the below methods.

Method Name: selectByIndex

Syntax: select.selectByIndex(Index);
Purpose: To Select the option based on the index given by the user.
There is an attribute called "values" which will have the index values.

The below is the sample html code using index
Example
HTML Code

<html>
<head>
<title>Select Example by Index value</title>
</head>
<body>
<select name="Mobiles"><option value="0" selected> Please select</option>
<option value="1">iPhone</option>
<option value="2">Nokia</option>
<option value="3">Samsung</option>
<option value="4">HTC</option>
<option value="5">BlackBerry</option>
</select>
</body>
</html>

Webdriver code for Selecting a Value using select.selectByValue(Value);

public class selectByIndexExample {
 WebDriver driver;
 @Test
 public void selectSamples()
 {
  driver = new FirefoxDriver();
  driver.get("C:\\Users\\DEV\\Desktop\\html-and-css-code-samples\\Final Code\\chapter-07\\dropdown-select.html");
  WebElement element=driver.findElement(By.name("Mobiles"));
  Select se=new Select(element);
  se.selectByIndex(1);
 }
}

Method Name: selectByValue

Syntax: select.selectByValue(Value);
Purpose: To Select the options that have a value matching with the given argument by the user.

Example:
HTML Code:

<html>
<head>
<title>Select Example by Value</title>
</head>
<body>
<p>Which mobile device do you like most?</p>
<select name="Mobiles"><option selectd> Please select</option>
<option value="iphone">iPhone</option>
<option value="nokia">Nokia</option>
<option value="samsung">Samsung</option>
<option value="htc">HTC</option>
<option value="blackberry">BlackBerry</option>
</select>
</body>
</html>

Webdriver code for Selecting a Value using select.selectByValue(Value);

public class selectExamples {
 WebDriver driver;
 @Test
 public void selectSamples()
 {
  driver = new FirefoxDriver();
  driver.get("C:\\Users\\DEV\\Desktop\\html-and-css-code-samples\\Final Code\\chapter-07\\dropdown-select.html");
  WebElement element=driver.findElement(By.name("Mobiles"));
  Select se=new Select(element);
  se.selectByValue("nokia");
 }
}

Method Name: selectByVisibleText

Syntax: select.selectByVisibleText(Text);
Purpose: To Select all options that display text matching the given argument. It will not look for any index or value, it will try to match the VisibleText (which will display in dropdown)

Example: Any of the above html code can be taken as example.

Webdriver example code to select the value by Visible text.

public class selectExamples {
 WebDriver driver;
 @Test
 public void selectSamples()
 {
  driver = new FirefoxDriver();
  driver.get("C:\\Users\\DEV\\Desktop\\html-and-css-code-samples\\Final Code\\chapter-07\\dropdown-select.html");
  WebElement element=driver.findElement(By.name("Mobiles"));
  Select se=new Select(element);
  se.selectByVisibleText("HTC");
 }
}

Method Name: deselectByIndex

Syntax: select.deselectByIndex(Index);
Purpose: To Deselect the option at the given index. The user has to provide the value of index.
Please check for the below example.

Method Name: deselectByValue

Syntax: select.deselectByValue(Value);
Purpose: To Deselect all options that have a value matching the given argument.
Please check for the below example.

Method Name: deselectByVisibleText

Syntax: select.deselectByVisibleText(Text);
Purpose: To Deselect all options that display text matching the given argument.
Please check for the below example.

Method Name: deselectAll

Syntax: select.deselectAll();
Purpose: To Clear all selected entries. This works only when the SELECT supports multiple selections. It throws NotImplemented eError if the "SELECT" does not support multiple selections. In select it mandatory to have an attribute multiple="multiple"
Please check for the below example.

Example::
HTML Code for Multi Select :

<html>
<head>
<title>Multi select Drop Down List Box</title>
</head>
<body>
<p>What all devices do you listen to music on?</p>
<select name="Mobdevices" multiple="multiple"><option value="0" selectd> Please select</option>
<option value="1">iPhone</option>
<option value="2">Nokia</option>
<option value="3">Samsung</option>
<option value="4">HTC</option>
<option value="5">BlackBerry</option>
</select>
</body>
</html>

Webdriver code to show all the above deselect methods.

public class selectExamples {
 WebDriver driver;
 @Test
 public void selectSamples() throws InterruptedException
 {
  driver = new FirefoxDriver();
  driver.get("C:\\Users\\DEV\\Desktop\\html-and-css-code-samples\\Final Code\\chapter-07\\dropdown-select.html");
  WebElement element=driver.findElement(By.name("Mobdevices"));
  Select se=new Select(element);
  //Here we will take multi select dropdown to show you the difference
  se.selectByVisibleText("HTC");
  se.selectByValue("nokia");
  
  //From the above two commands, in the dropdown two values will be selected. 
  //Now we will try to deselect any of the One
  //Im using thread to see the difference when selecting and selecting
  Thread.sleep(3000);
  se.deselectByValue("nokia");

  //You can deselect the value by specifying the index, value and VisibleText
  
  //It will work if you the index is already selected
  se.deselectByIndex(1);
  
  //It will deselect if the visible text HTC is in selected mode
  se.deselectByVisibleText("HTC");
  
  //It will de-select all the values which are selected
  se.deselectAll();
 }
}

Please click the below link for Select options 'Part-2"
Select Options Part -2

Software Testing

সোমবার, ২৬ অক্টোবর, ২০১৫

Webdriver SELECT Methods to work with Dropdowns