Dropdown with checkbox, need to select and unselect checkbox with select function and get the associated value using selenium

Question

For my project, I have a drop down containing different check boxes. Some of the check boxes are selected by default. I want to select and unselect check boxes, get the text value and validate whether checked value got saved or not. I have to do using selenium.

Below is the div containing dropdown and checkboxes

<div class="iframe-multi-dropdown multisection-dropdown outline-none1">
    <ul class="top multiSelect" id="g-dropdown" data-type="multiSelect" autoid="dropdown-values">
        <li id="li-0" data-level-id="" class="li-level1" tabindex="-1">
            <h3 data-id="" data-acc-id="" id="li-0-h" data-level-header="level1-header" class="header level1-header clearfix Paragraph1 selected outline-none1 label-css-level1 selectable " role="presentation">
                <input type="checkbox" aria-label1="" aria-hidden="true" name="level1" value="">
                <span role="checkbox" aria-label="Rupendra,E@Reddy" tabindex="0" aria-checked="true" class="component-check-box yodlee-font-icon svg_tick outline-none1 check-box-css level1"></span>
                <span class="ellipsis name text text-css-level1" aria-hidden="true" title="Rupendra,E@Reddy" data-title="Rupendra,E@Reddy">Rupendra,E@Reddy</span>
             </h3>           
        </li>
        <li id="li-1" data-level-id="" class="li-level1" tabindex="-1">
            <h3 data-id="" id="li-1-h" data-acc-id="" data-level-header="level1-header" class=" header level1-header Paragraph1 clearfix outline-none1 label-css-level1 selectable " role="presentation">
                <input type="checkbox" aria-label1="" aria-hidden="true" name="level1" value="">
                <span role="checkbox" aria-label="Chandra,K" tabindex="0" aria-checked="false" class="component-check-box yodlee-font-icon outline-none1 check-box-css level1"></span>
                <span class="ellipsis name text text-css-level1" aria-hidden="true" title="Chandra,K" data-title="Chandra,K">Chandra,K</span>
             </h3>
        </li>
        <li id="li-2" data-level-id="" class="li-level1" tabindex="-1">
            <h3 data-id="" id="li-2-h" data-acc-id="" data-level-header="level1-header" class=" header level1-header Paragraph1 clearfix outline-none1 label-css-level1 selectable " role="presentation">
                <input type="checkbox" aria-label1="" aria-hidden="true" name="level1" value="">
                <span role="checkbox" aria-label="Deven,S" tabindex="0" aria-checked="false" class="component-check-box yodlee-font-icon outline-none1 check-box-css level1"></span>
                <span class="ellipsis name text text-css-level1" aria-hidden="true" title="Deven,S" data-title="Deven,S">Deven,S</span>
            </h3>
        </li>
        <li id="li-3" data-level-id="" class="li-level1" tabindex="-1">
            <h3 data-id="" data-acc-id="" id="li-3-h" data-level-header="level1-header" class="header level1-header clearfix Paragraph1 selected outline-none1 label-css-level1 selectable " role="presentation">
                <input type="checkbox" aria-label1="" aria-hidden="true" name="level1" value="">
                <span role="checkbox" aria-label="Mohan &amp;&amp; Raj" tabindex="0" aria-checked="true" class="component-check-box yodlee-font-icon svg_tick outline-none1 check-box-css level1"></span>
                <span class="ellipsis name text text-css-level1" aria-hidden="true" title="Mohan &amp;&amp; Raj" data-title="Mohan &amp;&amp; Raj">Mohan &amp;&amp; Raj</span>
            </h3>           
        </li>
        <li id="li-4" data-level-id="" class="li-level1" tabindex="-1">
            <h3 data-id="" data-acc-id="" id="li-4-h" data-level-header="level1-header" class="header level1-header clearfix Paragraph1 selected outline-none1 label-css-level1 selectable " role="presentation">
                <input type="checkbox" aria-label1="" aria-hidden="true" name="level1" value="">            
                <span role="checkbox" aria-label="Yumiko<>K" tabindex="0" aria-checked="true" class="component-check-box yodlee-font-icon svg_tick outline-none1 check-box-css level1"></span>
                <span class="ellipsis name text text-css-level1" aria-hidden="true" title="Yumiko<>K" data-title="Yumiko<>K">Yumiko&lt;&gt;K</span>
            </h3>           
        </li>
    </ul>
    <ul class="no-records hide">
        <li id="test" class="li-level1" role="alert" aria-atomic="true" aria-live="assertive">
            <div data-id="test" tabindex="0" class=" header level1-header Paragraph1 outline-none1 label-css-level1">
                <span class="ellipsis name text text-css-level1"></span>
            </div>
        </li>
    </ul>
</div>

I am using below generic code:

public List<String> checkUncheck() {
        LinkedList<String> owner = new LinkedList<String>();
        List<WebElement> li = SeleniumUtil.getWebElements(d, "checkUncheck", pageName, frameName);
        int si =li.size();
        System.out.println(si);
        for ( WebElement els : li ) {
            String values =els.getText();
            if (!els.isSelected()) {
                els.click();
                owner.add(els.getText().trim());
                //logger.error("Could not able to get the owner name checkbox to click");
            }
            if (els.isSelected()) {
                els.click();
            }

        }
        return owner;
}

and calling it below

logger.info("Check and Uncheck the checkboxes");
List<String> ownerName = manageAccount_loc.checkUncheck();
logger.info("The value selected in Pop up are " + ownerName);

It's printing all five names, but I need only selected names

Sighil Sighil · Accepted Answer · 2019-05-20T05:03:01

This is what I understood as your requirement

If check box is selected, un-select it. If it is not selected, select it.
Get the values of all the check boxes that are selected by default

Since, it is not a traditional select box but rather a HTML-JS impementaion, it is better to use the below code

public List<String> checkUncheck() {
    LinkedList<String> owner = new LinkedList<String>();
    List<WebElement> liElementList = SeleniumUtil.getWebElements(d, "checkUncheck", pageName, frameName);
    int listSize = liElementList.size();
    System.out.println(listSize);

    for ( WebElement liElement : liElementList) {

        // Find h3 tag which is part of li.            
        WebElement h3Element = liElement.findElement(By.tagName("selected"));

        // h3 element has a class "selected" which marks if an element 
        // is selected. We use this to determine if the checkbox is selected
        boolean isSelected = h3Element.getAttribute("class").contains("selected") ? true : false;
        if (isSelected) 
            owner.add(liElement.getText().trim());
         // Click liElement regardless of selected status
         liElement.click();
    }
    return owner;
}

Dropdown with checkbox, need to select and unselect checkbox with select function and get the associated value using selenium

1 Answers