2

I have a dropdown list, when I click on any of the dropdown value then a modal get opens, When I click outside the modal, it will get close. How to handle it with Selenium WebDriver?

here is my Modal Code

<div class="modal fade bd-example-modal-sm show" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="display: block;">
  <div class="modal-dialog modal-sm">
     <div class="modal-content">You click on Dropdown hover Option
     </div>
  </div>

I have tried with below code

driver.switchTo().defaultContent();

and 

driver.switchTo().alert().dismiss();

But both are not working.

vijayateke
  • 67
  • 1
  • 8
  • try `driver.switchTo().activeElement()` not sure, but try and let us know – Sachith Wickramaarachchi Jun 24 '19 at 10:25
  • 1
    This isn't a JavaScript Alert so you don't need to use the switchTo() functionality. Just click on another element to dismiss it. – Ardesco Jun 24 '19 at 10:25
  • Try sending `ESC` key command using the actions API. It will escape the modal and it will be closed. – demouser123 Jun 24 '19 at 10:33
  • Doesn't the _Modal Dialog_ fade away automatically after certain time interval? Is clicking outside the modal necessary? – undetected Selenium Jun 24 '19 at 11:05
  • @Ardesco, I have tried to click on the other elements from the POM, but getting org.openqa.selenium.ElementClickInterceptedException – vijayateke Jun 24 '19 at 11:21
  • @demouser123, I have tried this method, and it works, But I want to handle it by another method – vijayateke Jun 24 '19 at 12:19
  • It's a normal user behavior to dismiss such a modal via `ESC`. Why do you want to handle it other way if there is a solution available? – demouser123 Jun 24 '19 at 12:28
  • You haven't provided enough markup for an accurate answer. Normally controls like this have a display box layered on top of an opaque element that covers the entire page. It's the opaque element rather than the display box showing some information that you would expect to click on. – Ardesco Jun 24 '19 at 13:53
  • @Ardesco I was going through the site "https://demo.stqatools.com/MouseHover.php", you can try it, On mouse hovers on the "Mouse Hover DropDown" button, a dropdown list will display. On click of the dropdown list, you will see the above mentioned modal. – vijayateke Jun 25 '19 at 07:02

3 Answers3

1

If you don't want to hit the Esc key you can click on div that has been created to cover the rest of the page using the following:

    driver.get("https://demo.stqatools.com/MouseHover.php");
    WebElement hoverButton = driver.findElement(By.cssSelector(".dropbtn"));
    WebElement linkOne = driver.findElement(By.cssSelector(".dropdown-content > a"));

    //Activate modal dialogue
    Actions action = new Actions(driver);
    action.moveToElement(hoverButton).perform();
    wait.until(ExpectedConditions.visibilityOf(linkOne));
    action.moveToElement(linkOne).click().perform();

    //Dismiss modal dialogue
    driver.findElement(By.cssSelector(".show")).click();
Ardesco
  • 7,137
  • 24
  • 48
0

This is not an alert, it's just a normal piece of DOM which looks like a modal popup due to CSS styling

So all you need to do is to locate the element using, for instance it's text, the relevant XPath locator would be something like:

//div[contains(text(),'You click on Dropdown hover Option')]

It would be also good to "wait" until popup presence/intractability via WebDriverWait like:

new org.openqa.selenium.support.ui.WebDriverWait(driver, 10)
        .until(
                ExpectedConditions.elementToBeClickable(
                        By.xpath("//div[contains(text(),'You click on Dropdown hover Option')]")))
        .click();
Dmitri T
  • 140,090
  • 4
  • 71
  • 123
-1

The most easy way - it's click on some static text on page. Try click on page title (if exist).

Amerousful
  • 1,608
  • 1
  • 11
  • 20