2

In my web-page (or popup), there are multiple input-boxes and checkbox. Input boxes and check-boxes are in separate div tag. Here is my html code:

<div class="modal-body-large">
    <div class="col-md-12 step-forms custom-tab-content">
        <form class="form-horizontal form-sections">
            <div class="form-group">
                <label class="control-label col-sm-2">Username<span class="red">*</span></label>
                <div class="col-sm-10">
                    <input name="userId" class="form-control custom-form-control" type="text" placeholder="Username" value="">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">Email<span class="red">*</span></label>
                <div class="col-sm-10">
                    <input name="email" class="form-control custom-form-control" type="text" placeholder="Email" value="">
                </div>
            </div>
            .....
        </form>
    </div>
    <div class="col-md-12 step-forms custom-tab-content">
        <form class="form-horizontal"><span class="help-block" style="font-size: small;"><i>Note: Optional</i></span>
            <div class="col-md-6">
                <div>
                    <div class="form-sections">
                        <ul>
                            <li>Select permissions</li>
                            <li>
                                <input type="checkbox" id="permissions1565851434728" name="permissions">
                                <label for="permissions1565851434728" class="xh-highlight">Select all</label>
                            </li>
                        </ul>
                        <div class="searchbox-container">
                            <div class="check-list">
                                <ul>
                                    <li title="">
                                        <input type="checkbox" id="371565851434728" name="permissions" value="Add/Update Network Security">
                                        <label for="371565851434728" class="">Add/Update Network Security</label>
                                    </li>
                                    <li title="">
                                        <input type="checkbox" id="111565851434728" name="permissions" value="Add/Update Permissions">
                                        <label for="111565851434728" class="">Add/Update Permissions</label>
                                    </li>
                                    .....
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-sections">
                    <ul>
                        <li>Select roles</li>
                        <li>
                            <input type="checkbox" id="roles1565851434730" name="roles">
                            <label for="roles1565851434730">Select all</label>
                        </li>
                    </ul>
                    <div class="searchbox-container">
                        <div class="check-list">
                            <ul>
                                <li title="Update User Details,Create User,Create Project">
                                    <input type="checkbox" id="role-c98974c6-a4b1-4428-9d9e-7df9f00acd351565851434730" name="roles" value="test">
                                    <label for="role-c98974c6-a4b1-4428-9d9e-7df9f00acd351565851434730">test</label>
                                </li>
                                .....
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

When I come to this page, I'm successfully able to enter text in input fields. When it comes to select checkbox, I have to give complete xpath to that checkbox. Like, if I want to select checkbox Select all, I am giving xpath as

"/html/body/div[@id='app']/div[@class='_loading-overlay']/main/div[@class='container-fluid search_table_container']/div[1]/div[@class='identity-management']/div[@class='row identity-list']/div/div[@class='filter-head col-md-12']/div[@class='search_right']/div[@class='modal fade in']/div[@class='modal-dialog modal-lg']/div[@class='modal-content']/div[@class='modal-body-large']/div[@class='col-md-12 step-forms custom-tab-content'][2]/form[@class='form-horizontal']/div[@class='col-md-6'][1]/div/div[@class='form-sections']/ul/li[2]/label"

My concern is there any alternate to do this?

Mark Rotteveel
  • 82,132
  • 136
  • 114
  • 158
  • 3
    Does this answer your question? [Click Check-box from the list of Check boxes via Selenium/Webdriver](https://stackoverflow.com/questions/11888786/click-check-box-from-the-list-of-check-boxes-via-selenium-webdriver) – Josh Correia Sep 04 '20 at 19:30

5 Answers5

0

You could use the text of the uncle element. To get Select all under Select permissions you can use

//li[contains(., 'Select permissions')]/following-sibling::li/label
Guy
  • 34,831
  • 9
  • 31
  • 66
0

You can use xpath, and use WebDriverWait for make the element exist then use Actions, try this :

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//*[@type='checkbox' and contains(@id,'permissions')]")));
WebElement elmnt = driver.findElement(By.xpath("//*[@type='checkbox' and contains(@id,'permissions')]"));
Actions act = new Actions(driver);
act.moveToElement(elmnt).click().build().perform();

Or

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("(//*[@type='checkbox'])[1]")));
WebElement elmnt = driver.findElement(By.xpath("(//*[@type='checkbox'])[1]"));
Actions act = new Actions(driver);
act.moveToElement(elmnt).click().build().perform();

Change the [1] to [2] etc, if you want another checkbox.

frianH
  • 5,901
  • 6
  • 13
  • 36
  • i used second one it says org.openqa.selenium.ElementNotInteractableException: element not interactable – dharmesh mehta Aug 15 '19 at 16:37
  • I've updated the code, add `WebDriverWait` and use `Actions`. – frianH Aug 15 '19 at 21:47
  • Got an error org.openqa.selenium.TimeoutException: Expected condition failed: waiting for element to be clickable: By.xpath: //*[@type='checkbox' and contains(@id,'permissions')] (tried for 20 second(s) with 500 milliseconds interval) – dharmesh mehta Aug 17 '19 at 06:13
0

Selecting a checkbox is similar to clicking a button. I see there is id for all the checkboxes and also value field for some checkboxes. So you can use the following methods to accomplish what you need.

Select checkbox using id by passing it to the XPath,

driver.findElement(By.xpath(".//*[@id='permissions1565851434728']")).sendKeys(Keys.SPACE);

You can click checkbox instead of sending keys like the following,

WebElement checkBox = driver.findElement(By.id("permissions1565851434728"));
checkBox.click();

Select checkbox using value by passing it to the CSSSelector,

WebElement checkBox = driver.findElement(By.cssSelector("input[value='Add/Update Network Security']"));
checkBox.click();

And if there are 2 checkboxes you can use as follows,

driver.FindElements(By.xpath("(//input[@type='checkbox'])[1]"));
driver.FindElements(By.xpath("(//input[@type='checkbox'])[2]")); ...

Selenium WebDriver uses the native methods of browsers to interact with the web components. Be that as it may, some times the web components do not react to these native methods. In such cases, your most solid option is JavaScript.

So you can try the following JavaScript to interact with the web element,

WebElement element = driver.findElement(By.cssSelector("input[value='Add/Update Network Security']"));

((JavascriptExecutor)driver).executeScript("arguments[0].click();", element);

And also you can try with WebDriverWait said by DebanjanB.

Hasitha Jayawardana
  • 2,152
  • 3
  • 14
  • 32
0
  1. For Select Roles checkbox:

    //li[text()='Select roles']/following-sibling::li/input
    

    enter image description here

  2. For Select Permissions checkbox the same approach:

    //li[text()='Select permissions']/following-sibling::li/input
    
  3. following-sibling is XPath Axis returning the next node having the same parent and text() is XPath function matching node text content

Dmitri T
  • 119,313
  • 3
  • 56
  • 104
0

To click() on the check box associated with the <label> as Select all as the desired element is within a Modal Dialog you have to induce WebDriverWait for the elementToBeClickable() and you can use the following Locator Strategy:

  • xpath:

    new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//li[text()='Select permissions']//following::li[1]//label"))).click();
    
DebanjanB
  • 118,661
  • 30
  • 168
  • 217