Home > database >  How to uncheck dynamic checkbox using Selenium Java
How to uncheck dynamic checkbox using Selenium Java

Time:07-22

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"  id="mat-option-370" tabindex="0" aria-selected="true" aria-disabled="false" style="">
    <mat-pseudo-checkbox ></mat-pseudo-checkbox>
    <!---->
    <span >2022-Apr</span>
    <!---->
    <div mat-ripple="" ></div>
</mat-option>

Dropdown List HTML:

<div >

<div ></div></div>

HTML after unselecting the checkbox with April 2022:

<mat-option _ngcontent-vor-c141="" role="option"  id="mat-option-370" tabindex="0" aria-selected="false" aria-disabled="false" style="">
    <mat-pseudo-checkbox ></mat-pseudo-checkbox>
    <!---->
    <span >2022-Apr</span>
    <!---->
    <div mat-ripple="" ></div>
</mat-option>

CodePudding user response:

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);
  • Related