How to uncheck dynamic checkbox using Selenium Java

Issue

I have month dropdown where all the month that appears in the dropdown will be selected by default. The question is, I want only 2050-Jan month checkbox to remain checked and want the other month checkbox to be unchecked. Please note that the Year and Month is Dynamic. i.e. if the dropdown has 3 options displayed then the same dropdown can have 2 options displayed or could have more than 3 options displayed.
But the only thing is the Year and month 2050-Jan alone should remain to be unchecked.

So this being the case how do I uncheck the other two or more checkbox.

Automating in Java selenium any leads will be very helpful.

For now if you see the below dropdown has 3 month and Year option selected by default of which I would need only 2050-Jan to remain unchecked.

This is a dynamic dropdown where the Year and Month will change but 2050-Jan will always be there but cant say if this will come as 3rd option always

HTML:

<mat-option _ngcontent-vor-c141="" role="option" class="mat-option mat-focus-indicator mat-option-multiple ng-tns-c92-121 ng-star-inserted mat-selected mat-active" id="mat-option-370" tabindex="0" aria-selected="true" aria-disabled="false" style="">
    <mat-pseudo-checkbox class="mat-pseudo-checkbox mat-option-pseudo-checkbox ng-star-inserted mat-pseudo-checkbox-checked"></mat-pseudo-checkbox>
    <!---->
    <span class="mat-option-text">2022-Apr</span>
    <!---->
    <div mat-ripple="" class="mat-ripple mat-option-ripple"></div>
</mat-option>

Dropdown List HTML:

<div class="mat-select-arrow-wrapper ng-tns-c92-121">

<div class="mat-select-arrow ng-tns-c92-121"></div></div>

HTML after unselecting the checkbox with April 2022:

<mat-option _ngcontent-vor-c141="" role="option" class="mat-option mat-focus-indicator mat-option-multiple ng-tns-c92-121 ng-star-inserted mat-active" id="mat-option-370" tabindex="0" aria-selected="false" aria-disabled="false" style="">
    <mat-pseudo-checkbox class="mat-pseudo-checkbox mat-option-pseudo-checkbox ng-star-inserted"></mat-pseudo-checkbox>
    <!---->
    <span class="mat-option-text">2022-Apr</span>
    <!---->
    <div mat-ripple="" class="mat-ripple mat-option-ripple"></div>
</mat-option>

Solution

To uncheck the desired you can click() on the element with text as 2022-Apr using the following locator strategy:

new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.elementToBeClickable(By.xpath("//mat-option//span[@class='mat-option-text' and text()='2022-Apr']//preceding-sibling::mat-pseudo-checkbox[1]"))).click();

As an alternative you can use removeAttribute method to remove the classname mat-pseudo-checkbox-checked as follows:

WebElement element = driver.findElement(By.xpath("//mat-option//span[@class='mat-option-text' and text()='2022-Apr']//preceding-sibling::mat-pseudo-checkbox[1]"));
((JavascriptExecutor)driver).executeScript("arguments[0].removeAttribute('class')", element);
WebElement newElement = driver.findElement(By.xpath("//mat-option//span[@class='mat-option-text' and text()='2022-Apr']//preceding-sibling::mat-pseudo-checkbox[1]"));
((JavascriptExecutor) driver).executeScript("arguments[0].setAttribute('class','mat-pseudo-checkbox mat-option-pseudo-checkbox ng-star-inserted')", newElement);

Answered By – undetected Selenium

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published