Handle checkbox and radio button using JavascriptExecutor

We have already discussed the technique to handle checkbox and radio button in Selenium WebDriver. The technique which we have discussed earlier is simple and default one. As we have also discussed that sometimes click button command does not work in Selenium, hence, in such case, JavascriptExecutor technique to click on web element came as the savior.

Today we are going to discuss the scenario which occurs when checkbox become disabled and radio button is not clickable. Thus, in this case, also JavascriptExecutor is the savior.

Revision from the earlier tutorial on checkbox and radio button handling

I would highly recommend you to first read the default tutorial on checkbox and radio button handling. If those techniques don’t work for you then try this tutorial. Just for the purpose of revision here are some of the points that we already discussed in the earlier tutorial which is about checkbox and radio button handling:

• HTML tag for radio button: <input type=’radio’ name=’some_name’ class=’some_class’ />
• HTML tag for checkbox button: <input type=’checkbox’ name=’some_name’ class=’some_class’ />
• Methods to perform actions on the checkbox and radio button are-

1. isSelected();
2. isDisplayed();
3. isEnabled();

So these are the three important points we had discussed earlier. Let’s move ahead with this tutorial.

Click on radio button which is disabled using JavascriptExecutor

Sometimes radio button appears disabled due to some environmental issues, hence, in such situation this scenario helps us to resolve the roadblock. We use JavascriptExecutor interface to handle such situation and here is the sample command for the same:

JavascriptExecutor js = (JavascriptExecutor)driver;

js.executeScript(“document.getElementById(‘element_id’).click();”);

This JavascriptExecutor fetches the DOM and find an element by its id and click on the element. Here is the entire program:

package SeleniumTester;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class JavascriptExecutorClickDemo {
  @Test
  public void javascriptExecutorClickDemo() throws InterruptedException {
	  
System.setProperty("webdriver.chrome.driver", "C:\\Selenium\\chromedriver.exe");
	  
	  WebDriver driver = new ChromeDriver();
	 
	  driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
	  
	  driver.get("https://www.facebook.com");
	  
	  driver.manage().window().maximize();
	  Thread.sleep(3000);
	  //Javascript command
	  JavascriptExecutor js = (JavascriptExecutor)driver;
	  js.executeScript("document.getElementById('u_0_b').click();");
	  	  
	  Thread.sleep(5000);
	  
	  driver.close();
	  
	  driver.quit();
	  

  }
}

Explanations

In this program, we are opening the homepage of Facebook and clicking on the Female radio button. However, in this case, everything looks normal for the Facebook radio button.

Select any unchecked checkbox button using JavascriptExecutor

Sometimes the status of checkbox button comes as false so in such case, normal click method doesn’t work. Therefore, we handle such scenario by using JavascriptExecutor. Here is the sample command to handle such situation in Automation testing.

JavascriptExecutor js = (JavascriptExecutor)driver;

js.executeScript(“document.getElementById(‘element_id’).checked=false;”);

Let’s jump to the program to click on the checkbox with JavascriptExecutor:

package SeleniumTester;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class JavascriptExecutorClickDemo {
  @Test
  public void javascriptExecutorClickDemo() throws InterruptedException {
	  
System.setProperty("webdriver.chrome.driver", "C:\\Selenium\\chromedriver.exe");
	  
	  WebDriver driver = new ChromeDriver();
	 
	  driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
	  
	  driver.navigate().to("http://www.memotome.com/");
	  driver.manage().window().maximize();
	  driver.findElement(By.xpath("html/body/form/table[2]/tbody/tr/td/font/center[2]/table/tbody/tr/td[3]/table/tbody/tr/td/table/tbody/tr[2]/td/input")).click();
	  //Enter username
	  driver.findElement(By.xpath("html/body/form/table[3]/tbody/tr/td/p[1]/input")).sendKeys("avinashinviul");
	  //Enter password
	  driver.findElement(By.xpath("html/body/form/table[3]/tbody/tr/td/p[2]/input")).sendKeys("12345");
	  //Click on Login Submit button
	  driver.findElement(By.xpath("html/body/form/table[5]/tbody/tr[1]/td[1]/input")).click();
	  //Click on Checkbox button
	  
	  //Javascript command
	  JavascriptExecutor js = (JavascriptExecutor)driver;
	  js.executeScript("document.getElementsByName('DelId').checked=false;");
	  	  
	  Thread.sleep(8000);
	  
	  driver.close();
	  
	  driver.quit();
	  

  }
}

Explanations

In this program, we are login in to the memotome website. This site is used to create various memo and reminders. Then WebDriver logins to the website and further it selects the checkbox button which is attached to the test memo.

Hope this tutorial will resolve the roadblocks by clicking on the radio as well as checkbox button. If you still have any doubts then feel free to write in comments below. Meanwhile, I have an exclusive post for you:

• How to highlight elements using JavascriptExecutor in Selenium?
• How to click using JavascriptExecutor in Selenium?