405. Using deselectByValue( ) command to deselect the list option from the Multi Select Box field using its value

deelectByValue( ) command is used to deselect the list option using the specified value of the List Option from the multi-selection Box field.

Finding the values of the list options:

Follow the below steps:

1. Open http://compendiumdev.co.uk/selenium/basic_html_form.html in Firefox Browser

2. Ensure that you have FireBug Add On installed in Firefox Browser (If not installed please read this post # 3 to install it)

3. Select the list option to be deselected, Right click on it and select 'Inspect element with Firebug' option as shown below:

4.  Observe that the HTML code of the Inspected List Option gets displayed as shown below:

5. Find out whether the highlighted HTML code has the value attribute or not as shown below:

6. So the value of the List option 'Selection Item 4' is ms4 .


Test Description:

Follow the below steps to understand the Test Description:

1. Open http://compendiumdev.co.uk/selenium/basic_html_form.html
2. Observe that the 'Selection Item 4' option is selected by default as shown below:

3.  Remove this default selection by using the Selenium WebDriver command deselectByValue( ) 

Using deselectByValue( ) command:

In order to use the deselectByValue( ) command, we have to create an object for Select class of selenium as shown below:

 Select select = new Select(_driver.findElement(By.cssPath("CSS Path of Multi-Select Box field")));

• Here Select is the Class name
• select is the object of Select Class

After creating an object for Select Class, you can get the deselectByValue( ) predefined method of Select Class by using its object select as shown below:

select.deselectByValue("ms4");  -> This will select the list option 'Selection Item 4'  (i.e. ms4 is the value of the value attribute in the HTML code of this list option)


Lets Implement This:

Pre-requisites:

1. Create a new Java Project say 'WebDriver-Project49' in Eclipse IDE
2. Configure the Project to work with Selenium WebDriver
3. Create a package say 'package49' under the newly created project.
4. Create a Java Class file say 'Class49' under the newly created package as shown below:

Actual Steps:

1. Write the following code into the newly created Java Class file as shown below and make sure that you resolve all the errors before going to next step:

2. Write the test method 'deselectByValueDemo( )' which uses CSS Path Statement for locating the  Multi-Selection Box field as shown below:

3. Save and Run the 'Class49.java' file by selecting the 'JUnit Test' option and ensure that our Automation Test has deselect the list option of the specified value of the HTML attribute value  from the Multi-select Box field as shown in the below video:

Watch the below video:

Click here to watch the video.

Download this Project:

Click here to download this project and import into Eclipse IDE  on your machine.

Please comment below to feedback or ask questions.

Using selectByVisibleText( ) command with Drop Down Field will be explained in the next post.